@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.stm-title {
	font-weight:800;
	font-size:14px;
	text-align:center;
	text-decoration-line:underline;
}

.stm {
	background-color:#F5F4F2;
	border-radius:10px;
	margin:5px;
	padding:10px;
	font-size:12px;
}


.loop_wrap {
  display: flex;
  width: 100vw;
  height: 300px;
  overflow: hidden;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}

.loop_wrap:hover ul {
  animation-play-state: paused;
}

.scroll-images {
  overflow: hidden;
}

.scroll-wrapper {
  display: flex;
  width: 100%;
}

.scroll-wrapper img {
  width: 200px; /* 画像のサイズを200pxにする */
}


small {
    font-size: 12px;
    color: #858585;
}

.list-cta-heading {
text-align: center;
background: #4b4b4b!important;
}

.list-cta-detail_title {
text-align: center;
margin-top: 20px;
margin-bottom: 10px!important;
}

.list-cta-detail {
border: 0px!important;
}

.entry-content tr:nth-child(1) th {
background: #5f5f5f;
color: #fff;
}

.entry-content tr:nth-child(1) th a {
color: #fff!important;
}

::selection{ /* Safari */
background: #FF3366; /* 背景カラー */
color: #fff; /* 文字カラー */
}
::-moz-selection{ /* Firefox */
background: #FF3366; /* 背景カラー */
color: #fff; /* 文字カラー */
}


/*---------------------
アイキャッチのスタイル
----------------------*/


/*---------------------
目次のスタイル
----------------------*/

.toc {
border: 0px;
width: 100%;
border: 0px;
box-shadow: 0 5px 20px -5px rgb(105 115 131 / 35%);
color: #555;
}

.toc li {
padding-bottom: 1em;
}

.toc-title {
font-weight: 700;
padding: 6px 12px;
color: #333;
font-size:20px;
border-bottom: 1px solid #000;
}

/*---------------------
トップページ用CSS
----------------------*/

.wp-block-columns {
margin-bottom: 4em;
}

.wp-block-column table {
width: 80%;
margin: 0 auto;
margin-bottom: 20px;
}

.wp-block-column table th, table td {
font-size:14px;
border: 1px solid #a3a3a3;
}

table th, table td {
font-size:14px;
border: 1px solid #a3a3a3;
}

.front-cv > h2 {
position: relative;
text-align: center;
border-bottom: 6px double #000;
}

.star-center {
text-align: center;
margin-bottom: 5px!important;
}

.star-center_sub {
text-align: center;
}

.crown-gold {
color: #ffcf32;
}

.crown-silver {
color: #bababa;
}

.crown-brown {
color: #b04f1e;
}

.star-box {
display:block;
}

.btn-img {
width: 80%;
text-align: center;
border: 1px solid #ddd;
}

.list-title {
text-align: center;
font-size: 24px;
margin-top: 5px;
padding: 5px;
color: #333;
}

.list-name {
text-align: center;
font-size: 22px;
margin: 0.5em;
color: #333;
}

.list-title-in::before, .list-title-in::after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 55px;
height: 1px;
background-color: black;
}

.link-btn .btn-text {
font-weight: 700;
display: table;
width: 100%;
text-align: center;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin-left: -5px;
font-size: 16px;
}

.link-btn.btn-black, .link-btn.btn-pink {
width: 80%;
height: 60px;
margin-left: auto;
margin-right: auto;
}

.btn-pink {
background-color: #ed466d;
}

.btn-black {
background-color: #2B3845;
}

.link-btn {
display: block;
position: relative;
overflow: auto;
cursor: pointer;
margin: 10px;
transition: all .2s!important;
}

.link-btn:hover {
border-radius:20px!important;
}

.link-btn:after {
content: "";
display: inline;
width: 14px;
height: 14px;
background-image: url(https://shibararenai-wifi.jp/img/pc/common/body/003_icon_arrowwhite.svg);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
transition: all .28s ease;
}

.star5_rating{
position: relative;
z-index: 0;
display: inline-block;
white-space: nowrap;
color: #CCCCCC; /* グレーカラー 自由に設定化 */
font-size: 18px;
}

.star5_rating:before, .star5_rating:after{
content: '★★★★★';
}

.star5_rating:after{
position: absolute;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

.star5_rating_sub {
position: relative;
z-index: 0;
display: inline-block;
white-space: nowrap;
color: #CCCCCC; /* グレーカラー 自由に設定化 */
font-size: 14px;
}

.star5_rating_sub:before, .star5_rating_sub:after{
content: '★★★★★';
}

.star5_rating_sub:after{
position: absolute;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating_sub[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating_sub[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating_sub[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating_sub[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating_sub[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating_sub[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating_sub[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating_sub[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating_sub[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating_sub[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating_sub[data-rate="0"]:after{ width: 0%; } /* 星0 */

ul {
padding-left: 20px;
margin: 0;
}


.news {
padding: 50px 0;
background: #FFF7EA;
}


.inner {
width: 80%;
background-color: #fff;
margin: 0 auto;
padding: 65px 0 100px;
}


.sub_ttl {
font-size: 30px;
text-align: center;
margin-bottom: 40px;
}

/* ここからがニュース記事のCSS */

.news_list {
margin: 0 5%;
}

.news_list_item {
padding: 25px 0;
border-bottom: 1px solid #E6E6E6;
}

.news_list_item p {
font-size: 16px;
}

.news_list_item a {
position: relative;
display: flex;
padding-right: 30px;
}

.news_list_date {
font-size: 15px;
display: flex;
margin-right: 15px;
align-items: center;
}

.news_item {
background: #b5b5b5!important;
color: #fff;
border-radius: 0px!important;
width: 6em;
/* 親要素の文字サイズを基準 */
text-align: center;
margin-left: 20px;
}

.arrow {
width: 25px;
height: 1px;
background: #707070;
position: absolute;
top: 50%;
right: 0;
}

.arrow::after {
content: "";
display: block;
width: 6px;
height: 1px;
background: #707070;
transform: rotate(45deg);
position: absolute;
right: 0px;
bottom: 2px;
}

.sclbox {
max-width: 1200px;
height: 200px;
overflow-y: scroll;
border: 1px solid #ccc;
}

/*トップページ用CSSの終わり*/

.navi .item-label, .navi .item-description {
font-weight: 700;
}

/*--------------------
プロフィールのスタイル
---------------------*/
#main .author-box {
border: 0px;
margin: 1em 0;
line-height: 1.4;
position: relative;
padding: 1.4% 2% 1.8% 0;
box-shadow: 0 5px 20px -5px rgb(105 115 131 / 35%);
color: #555;
}

#main .author-widget-name {
display: inline-block;
position: relative;
margin: 10px 0 0 -170px;
padding: 6px 12px;
background: #fff;
border-bottom: 1px solid #000;
color: #333;
font-size: 14px;
font-weight: 700;
z-index: 1;
}

#main .author-thumb {
float: left;
margin: 0;
padding-top: 70px;
width: 200px;
text-align: center;
}

#main .author-thumb img {
border: solid 5px #dfe2e8;
width: 100px;
}

#main .author-content {
margin: -30px 0 0 200px;
padding-left: 30px;
border-left: 2px #eaedf2 dashed;
}

#main .author-box .author-name {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 0.4em;
line-height: 1;
}

.author-box .author-name a {
text-decoration: none;
color: #333;
}

.author-description {
margin-bottom: 1em;
}

#main .author-box p {
font-size: .95em;
margin-top: 0.3em;
line-height: 1.6;
}


/*--------------------
サイドバーのアイコン
---------------------*/

.widget_search h3::before {
font-family: 'Font Awesome 5 Free';
content: '\f002';
margin-right: 5px;
} /* 人気記事 */

.widget_popular_entries h3::before {
font-family: 'Font Awesome 5 Free';
content: '\f7e4';
margin-right: 5px;
} /* 人気記事 */


.widget_new_entries h3::before {
font-family: 'Font Awesome 5 Free';
content: '\f005';
margin-right: 5px;
}

.widget_box_menu h3::before {
font-family: 'Font Awesome 5 Free';
content: '\f07b';
margin-right: 5px;
}

/*--------------------
フッターのスタイル
---------------------*/

#appeal {
height: calc(100vw * calc(200 / 1260));
}

.footer {
display:none;
}

.footer05 {
color: #000;
background: #FFF;
padding: 30px;
font-size: 14px;
margin-top:30px;
}
.footer05 a {
color: #fff;
text-decoration: none;
}
.footer05 li a:hover {
text-decoration: underline;
}
.footer05 .wrap {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer05 .wrap h3 {
margin: 0 0 10px 0;
padding: 0;
border-bottom: 1px #ddd solid;
}
.footer05 .wrap p {
margin: 0;
padding: 0 0 20px 0;
}
.footer05 .wrap .box {
width: 30%;
}
.footer05 .wrap .box ul {
margin: 0;
padding: 0 0 20px 0;
list-style: none;
}
.footer05 .wrap .copyright {
width: 100%;
padding: 20px 0 0 0;
}

.article h2 {
background-color: #fff;
margin: 60px 0 35px;
padding: 0 0 12px;
border-bottom: 7px double #1a1a1a;
color: #1a1a1a;
font-weight: bold;
font-size: 26px;
line-height: 1.47;
letter-spacing: 1px;
}

.sidebar h3 {
background-color: #fff;
padding: 0 0 12px;
border-bottom: 2px solid #1a1a1a;
color: #1a1a1a;
font-weight: bold;
font-size: 20px;
line-height: 1.47;
letter-spacing: 1px;
}

.article h3 {
margin: 40px 0 25px;
padding: 15px 0;
border:0px;
border-bottom: 2px solid #1a1a1a;
background: #fff;
color: #1a1a1a;
font-weight: bold;
font-size: 22px;
letter-spacing: 1px;
}

.article h4 {
border-top: 0px;
margin: 35px 0 20px;
padding: 10px 0;
border-bottom: 2px dotted #1a1a1a;
color: #1a1a1a;
font-weight: bold;
font-size: 20px;
letter-spacing: 1px;
}

/*--------------------
グローバルナビのスタイル
---------------------*/
.navi-in > ul li {
width: 140px;
}

.header-container-in.hlt-top-menu .logo-header img {
width: 300px;
}

.carousel {
margin-top: 30px;
}

/*--------------------
サイトTOPロゴの左寄せ
---------------------*/

.logo-image {
text-align: left;
} 

/*--------------------
ボタン設定
---------------------*/

.link-btn {
display: block;
position: relative;
overflow: auto;
cursor: pointer;
margin: 10px;
transition: all .2s;
}

.link-btn:hover {
border-radius:20px;
}

.btn-square-shadow {
text-align: center;
}

.btn-0 {
background: #ED466D;/*ボタン色*/
padding: 1em 1em;
position: relative;
text-align: center;
margin: 0 auto;
margin-bottom: 24px;
width: 90%;
}

.btn-0 a {
text-decoration: none;
color: white;
display: block;
}

.btn-1 {
background: #2B3845;/*ボタン色*/
padding: 1em 1em;
position: relative;
text-align: center;
margin: 0 auto;
margin-bottom: 24px;
width: 90%;
}

.btn-1 a {
text-decoration: none;
color: white;
display: block;
}

.btn-2 {
background: #ED466D;/*ボタン色*/
padding: 1em 1em;
position: relative;
text-align: center;
margin: 0 auto;
margin-bottom: 24px;
width: 90%;
}

.btn-2 a {
text-decoration: none;
color: white;
display: block;
}

.btn-move {
  background: linear-gradient(90deg, #F7B312, #F7B312 50%, #e5e5e5 50%);
  background-size: 200% 100%;
  padding: 1em;
  position: relative;
  animation: slideBg 5s linear infinite;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 24px;
  width: 90%;
  color: white;
  display: block;
  overflow: hidden;
}

.btn-move a {
  text-decoration: none;
  color: #2b3845; /* Initial text color */
  display: block;
  position: relative;
  z-index: 2; /* Ensure text is above the pseudo-element */
}

@keyframes slideBg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200% 0;
  }
}



.btn-move:hover a {
  color: #FFF; /* Hides the original text color on hover */
}





.btn-square-shadow:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;
}

/*---------------------
テーブルのスタイル
--------------------*/

.scroll-table {
overflow: auto;
}

table.post-table {
border-collapse:collapse;
white-space: nowrap;
border-top: 0px;
border-bottom: 0px;
}

/*----------------------
ボックスのスタイル
----------------------*/

.ec-group ul {
list-style-type: disc!important;
margin-bottom: 0.5em;
}

.ec-group ol {
list-style-type: disc!important;
margin-bottom: 0.5em;
}

.ec-group {
position: relative;
margin-bottom: 35px;
padding: 32px;
border: 2px solid #666;
border-radius: 4px;
background-color: #fff;
}

.ec-group-blue {
border-color: #0c81e6;
}

/*--------------------
文字設定
---------------------*/

/*テーブル内のリンク色*/
.entry-content table a {
color: #0c81e6!important;
text-decoration: underline;
}

/*注釈を中央寄せ*/
.entry-content .sizeXS {
text-align: center;
}

/*--------------------
CTAボックス設定
---------------------*/

.list-cta {
overflow: hidden;
}

.list-cta-heading {
background: #0c81e6;
display: block;
font-size: 18px;
color: #fff;
padding: 15px;
font-weight: bold;
border-radius: 10px 10px 0 0;;
}

.list-cta-heading a, .box-heading a {
color: #fff!important;
}

.list-cta-detail {
display: flex;
flex-wrap: wrap;
background: #f4f4f4;
padding-top: 0px;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
border-left: 1px solid #333;
margin-bottom: 24px;
}

.list-cta-detail_title {
font-size: 16px;
font-weight: bold;
}

.list-cta-detail__left {
max-width: 300px;
width: 100%;
margin: 20px;
}


.list-cta-detail__right {
width: calc(100% - 370px);
margin-right: 20px;
margin-bottom: 15px;
font-size: 14px;
}

/*--------------------
CTA設定
---------------------*/

.cta{
width: 80%;
margin: 0 auto;
}

.cta::after{
content: "";
display: block;
clear: both;
}

/*--------------------
画像付き吹き出し(会話)
---------------------*/

/* 吹き出し 全体*/
.talking {
margin-bottom:2em;
position:relative;
padding-top: 20px;
}

.talking:before , .talking:after {
clear:both;
content:"";
display:block;
}

/*アイコン*/
.talking figure {
width:60px;     /*アイコンの横幅*/
height:60px;    /*アイコンの縦幅*/
}

.talking-left_icon {
float:left;
margin-right:20px;    /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
float:right;
margin-left:20px;    /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
width:100%;
height:100%;
margin:0;
border:2px solid #EEE;
border-radius:50%;    /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
padding:2px 0 0;
font-size:12px;
text-align:center;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
font-size: 14px;
position:relative;
padding:10px;
border-style:solid;    /*枠線の線種*/
border-radius:10px;    /*セリフを入れる部分の角丸*/
max-width: calc(100% - 80px);
}

.talking p {
margin:0;
}

.talking p :last-child {
margin:0;
}

/*---左の吹き出し---*/
.talking-left {
float:left;
border-width:2px;         /*枠線の太さ*/
border-color:#EEE;   /*枠線の色*/
background:#EEE;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #EEE;  /*三角の線になる部分*/
top: 15px;
left: -22px;
}

.talking-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #EEE;
top: 15px;
left: -19px;
}

/*---右の吹き出し---*/
.talking-right {
float:right;
border-width:2px;      /*枠線の太さ*/
border-color:#EEE;    /*枠線の色*/
background:#EEE;    /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #EEE;  /*三角の線になる部分*/
top: 15px;
right: -22px;
}

.talking-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #EEE;
top: 15px;
right: -19px;
}

.mobile-menu-buttons {
background: #007AE9;
color: white;
}

.mobile-menu-buttons .menu-button > a {
color: white;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/

.news_list_item a {
display: block;
}

}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/

.list-cta-detail__left {
width: 100%;
max-width: auto;
text-align: center;
}
.list-cta-detail__left img {
display:block;
margin:auto
}
.list-cta-detail__right {
width: 100%;
padding: 0 20px;
margin-right: 0px;
}
.list-cta-detail__right .btn-medium {
width: 100%;
}

/*トップページ用*/
.news_list_item a  {
font-size: 14px;
}

}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.logo-image {
text-align: center;
}

.footer05 .wrap {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.footer05 .wrap h3 {
border: none;
}
.footer05 .wrap .box {
width: 100%;
}
.footer05 .wrap .box ul {
border-top: 1px #c4c4c4 solid;
}
.footer05 .wrap .box ul li a {
display: block;
padding: 5px 15px;
border-bottom: 1px #c4c4c4 solid;
}

/*トップページ用*/
.arrow { 
display: none;
}
.news_list_item a {
padding-right: 0;
}

#main .author-box {
margin: 1em 10px;
padding: 16px;
text-align: center;
}

#main .author-widget-name {
margin: 0;
display: inline-block;
position: relative;
padding: 6px 12px;
font-size: 20px;
font-weight: 700;
z-index: 1;
}

#main .author-thumb {
float: none;
margin: 0;
padding-top: 20px;
width: 100%;
text-align: center;
}

#main .author-content {
margin: 10px 0 0 0;
padding-left: 0;
border: none;
}

main .author-box .author-name {
font-size: 14px;
line-height: 1;
font-weight: bold;
margin-bottom: 0.4em;
}

#main .author-box p {
font-size: 14px;
text-align: left;
}

#main .author-box .sns-follow-buttons {
justify-content: center;
}

}

/*# sourceURL=/css/front/home.css */
/*@ sourceURL=/css/front/home.css */
.wrap_ft {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1020px;
    padding: 0 30px;
    width: 100%
}
@media (max-width: 960px) {
    .wrap_ft {
        padding:0;
        width: 90%
    }
}


.ft:hover,.ft:link,.ft:visited {
    color: #000;
    text-decoration: none!important
}





.row {
    margin-left: 0;
    margin-right: 0
}



    .pt60 {
        padding-top: 45px
    }


.follow-footer {
    background-color: #fff;
    bottom: 0;
    box-shadow: 0 0 24px 12px rgba(0,0,0,.07);
    left: 0;
    margin: 0 auto;
    position: fixed;
    transition: all .28s ease;
    width: 100%;
    z-index: 99999
}

.follow-footer-container {
    height: 100%
}

.follow-footer-container .nav-button {
    width: calc(100% - 80px)
}

.site-footer {
    width: 100%
}

.site-footer .footer-contact-area {
  
    background-color: #2b3845;
    padding: 30px 0
}

.site-footer .footer-column-area {
    background: #f5f7fa
}

.site-footer .footer-column-area .title {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 20px
}

@media (max-width: 480px) {
    .site-footer {
        font-size:15px
    }
}

.site-footer ul {
    display: flex;
    flex-direction: column
}

.site-footer li {
    color: #2b3845;
    font-size: 15px;
    line-height: 1.5em;
    padding: 10px 0
}

@media (max-width: 480px) {
    .site-footer li {
        font-size:14px
    }
}

.site-footer li a {
    color: inherit;
    display: inline;
    text-decoration: underline!important
}

.site-footer li a:hover {
    text-decoration: none!important
}

@media (min-width: 961px) {
    .site-footer {
        padding:25px 0
    }

    .site-footer .c-wrap {
        align-items: center;
        display: flex;
        justify-content: space-between
    }

    .site-footer .c-wrap {
        display: flex;
        flex: 1;
        padding: 25px 0;
        width: 100%
    }

    .site-footer .c-wrap {
        margin: 0 20px 0 0
    }

    .site-footer .c-wrap {
        margin-bottom: 24px
    }
}

@media (max-width: 960px) {
    .site-footer .c-wrap {
        max-width:340px;
        width: 100%
    }

    .site-footer .c-wrap {
        font-size: 15px;
        letter-spacing: .03em
    }
}

@media (max-width: 519px) {
    .site-footer .c-wrap {
        color:#fff;
        font-size: 13px;
        padding-bottom: 6px;
        text-align: center
    }

    .site-footer {
        align-items: center;
        flex-direction: column;
        width: 100%
    }

    .site-footer .c-wrap a:first-child {
        margin-bottom: 20px
    }

    .site-footer .c-wrap {
        height: 60px;
        max-width: 340px;
        width: 100%
    }
}

@media (min-width: 600px) {
    .site-footer .c-wrap {
        border-radius:35px
    }
}

@media (min-width: 961px) {
    .site-footer .c-wrap {
        border-left:1px solid #8599ad;
        padding: 25px 6.77083%
    }
}

@media (max-width: 960px) {
    .site-footer .c-wrap {
        display:none
    }

    .site-footer .c-wrap {
        align-items: center;
        display: flex
    }

    .site-footer .c-wrap img {
        height: 20px;
        width: 20px
    }

    .site-footer .c-wrap {
        border-bottom: 1px solid #8599ad;
        color: #8599ad;
        display: block;
        margin-left: 7px
    }
}

@media (max-width: 519px) {
    .site-footer .c-wrape {
        display:none
    }

    .site-footer .c-wrap {
        align-items: center;
        display: flex
    }

    .site-footer .c-wrap {
        display: inline-flex
    }

    .site-footer .c-wrap img {
        height: 20px;
        width: 20px
    }

    .site-footer .c-wrap {
        border-bottom: 1px solid #8599ad;
        color: #9ca2a8;
        display: inline-flex;
        line-height: 1.1;
        margin-left: 7px
    }
}

@media (min-width: 961px) {
    .site-footer .wrap .c-wrap {
        display:flex
    }
}

@media (max-width: 519px) {
    .site-footer .wrap .footer-logo a .h-logo img {
        height:27px;
        width: 160px
    }

    .site-footer .wrap .footer-logo a .company-name {
        font-size: 12px;
        padding-top: 8px
    }
}

@media (min-width: 961px) {
    .site-footer .wrap .footer-navi {
        display:flex
    }

    .site-footer .wrap .footer-navi .nav-box {
        padding-left: 20px
    }

    .site-footer .wrap .footer-navi .nav-left {
        padding-left: 55px
    }
}

@media (max-width: 960px) {
    .site-footer .wrap .footer-navi {
        padding-bottom:10px;
        padding-top: 10px
    }

    .site-footer .wrap .footer-navi .
  :first-child {
        margin-bottom: 0
    }

    .site-footer .wrap .footer-navi .nav-box ul li {
        border-bottom: 1px solid rgba(133,153,173,.15);
        margin-bottom: 0;
        padding-bottom: 20px;
        padding-top: 20px
    }

    .site-footer .wrap .footer-navi .nav-box:last-child ul li:last-child {
        border-bottom: none
    }
}

@media (max-width: 519px) {
    .site-footer .wrap .footer-navi .nav-box:first-child {
        margin-bottom:0
    }

    .site-footer .wrap .footer-navi .nav-box ul li {
        border-bottom: 1px solid rgba(133,153,173,.15);
        margin-bottom: 0;
        padding-bottom: 15px;
        padding-top: 15px
    }

    .site-footer .wrap .footer-navi .nav-box:last-child ul li:last-child {
        border-bottom: none
    }
}

@media (max-width: 960px) {
    .site-footer .wrap .footer-navi .nav-box ul li a {
        padding-left:0
    }

    .site-footer .wrap .footer-navi .nav-box ul li a:after,.site-footer .wrap .footer-navi ul li a:before {
        display: none
    }
}

.nav-box nav-left, .footer-logo, .nav-box {
    display: inline-block;
    width: 30%;
    margin: 20px auto;
}

@media (max-width:480px) {
   .c-wrap {
       flex-wrap: wrap;
   }

   .h-logo {
       width: 100%;
   }

  .nav-box {
       width: 100%;
   }
  .nav-box nav-left {
       width: 100%;
   }
}