@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
*/

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

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

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

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


.sidebar-scroll{    top: 90px;}

/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
#gHeader div, #gHeader span, #gHeader h1, #gHeader h2, #gHeader h3, #gHeader h4, #gHeader h5, #gHeader h6, #gHeader p,#gHeader a,#gHeader ul, #gHeader li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}
html  {
	font-size: 62.5%;
}
html  {
	font-family: 'Noto Sans JP', sans-serif;
}
#gHeader article, #gHeader aside, #gHeader canvas, #gHeader details, #gHeader figcaption, #gHeader figure, #gHeader footer, #gHeader header, #gHeader hgroup, #gHeader menu, #gHeader nav, #gHeader section, #gHeader summary {
	display: block;
}
#gHeader ol, #gHeader ul {
	list-style: none;
	box-sizing: border-box;
}
#gHeader blockquote, #gHeader q {
	quotes: none;
}
#gHeader :focus {
	outline: 0;
}
#gHeader ins {
	text-decoration: none;
}
#gHeader del {
	text-decoration: line-through;
}
#gHeader img {
	vertical-align: top;
	max-width: 100%;
    height: auto;
}
#gHeader a,
#gHeader a:link {
	color: #000;
	text-decoration: none;
}
#gHeader a:visited {
	color: #000;
}
#gHeader a:hover {
	color: #000;
}
#gHeader a:active {
	color: #000;
}

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-WYX */
/* clearfix */	
#gHeader .clearfix:after {content: "";display: block;clear: both;}
/* flex */	
#gHeader .flex,#gHeader .flexA,#gHeader .flexB,#gHeader .flexC {display: flex;flex-wrap: wrap;}
#gHeader .flexA {justify-content: space-around;}
#gHeader .flexB {justify-content: space-between;}
#gHeader .flexC {justify-content: center;}
/*------------------------------------------------------------
	common
------------------------------------------------------------*/
#gHeader .robo {
	font-family: 'Roboto', sans-serif;
}
#gHeader .col01 {
	color: #003A9F;
}
#gHeader .col02 {
	color: #D0000F;
}
/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	min-width: 1280px;
	color: #000;
	font-size: 1.6rem;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #FFF;
	/*padding-top:91px;*/
}
#gHeader .fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}
#gHeader #container {
	text-align: left;
}
#gHeader #main {
	display: block;
}
#gHeader a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}
@media all and (min-width: 897px) {
	#gHeader .sp {
		display: none !important;
	}
}
@media all and (max-width: 896px) {
	body {
		min-width: inherit;
		font-size: 1.4rem;
		/*padding-top:48px;*/
	}
	#gHeader a:hover,
	#gHeader a:hover img {
		opacity: 1 !important;
	}
	#gHeader .pc {
		display: none !important;
	}
	#gHeader a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
}
/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader {
	padding: 24px 27px 24px 30px;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	box-sizing: border-box;
}
#gHeader .logoBox {
	width: 257px;
}
#gHeader h1 {
	width: 257px;
}
#gHeader .rBox {
	width: 1040px;
	justify-content: flex-end;
}
#gHeader .linkBox {
	margin: 1px 0 0 20px;
	width: 484px;
	position: relative;
}
#gHeader .linkBox::before {
	position: absolute;
	top: -2px;
	bottom: 2px;
	left: -18px;
	width: 1px;
	content: "";
	background-color: #C4C4C4;
}
#gHeader .linkBox .tel {
	margin-top: -2px;
	width: 182px;
	word-break: break-all;
}
#gHeader .linkBox .tel a {
	padding-left: 25px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	background: url("/img/common/icon01.png") no-repeat center left 2px / 18px;
}
#gHeader .linkBox .tel .time {
	margin: -3px 0 0 18px;
	font-size: 1.4rem;
	display: block;
	text-align: center;
}
#gHeader .linkBox .linkUl {
	margin-left: 13px;
	flex: 1;
	justify-content: flex-end;
}
#gHeader .linkBox .linkUl li {
	margin-left: 10px;
	width: calc(50% - 6px);
}
#gHeader .linkBox .linkUl li:first-child {
	margin-left: 0;
}
#gHeader .linkBox .linkUl .col a {
	background-color: #003A9F;
}
#gHeader .linkBox .linkUl li a {
	padding: 8px 2px 10px;
	font-size: 1.6rem;
	font-weight: 700;
	color: #FFF;
	text-align: center;
	min-width: 140px;
	display: block;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: #4EAFEB;
}
@media all and (min-width: 897px) and (max-width: 1330px) {
	#gHeader {
		padding: 36px 10px 30px;
	}
	#gHeader .logoBox {
		width: 20vw;
	}
	#gHeader h1 {
		width: 19.5vw;
	}
	#gHeader .rBox {
		flex: 1;
	}
	#gNavi .naviList li {
		margin: 0 5px !important;
	}
	#gNavi .naviList li a {
		font-size: 1.4rem !important;
	}
	#gHeader .linkBox {
		margin-left: 10px;
		width: 380px;
	}
	#gHeader .linkBox .tel {
		width: 150px;
	}
	#gHeader .linkBox .tel a {
		font-size: 1.8rem;
	}
	#gHeader .linkBox .linkUl {
		margin-left: 3px;
	}
	#gHeader .linkBox .linkUl li {
		width: calc(50% - 6px);
	}
	#gHeader .linkBox .linkUl li a {
		font-size: 1.35rem;
		min-width: 110px;
	}
}	
@media all and (min-width: 897px) {
	#gHeader .linkBox .linkUl li a:hover {
		opacity: 0.7;
	}
}
@media all and (max-width: 896px) {
	#gHeader {
		display:none;
		padding: 11px 28px 10px 11px;
		min-width:100%;
	}
	#gHeader .logoBox {
		width: 184px;
	}
	#gHeader h1 {
		width: 185px;
	}
	#gHeader h1 a {
		display: block;
	}
	#gHeader .rBox {
		width: auto;
	}
}
/*------------------------------------------------------------
    gNavi
------------------------------------------------------------*/
#gNavi .naviList {
    margin: 4px 13px 0 0;
    font-size: 2rem;
    font-weight: 700;
    justify-content: flex-end;
    color: #FFF;
}
#gNavi .naviList li {
    margin: 0 16px;
}
#gNavi .naviList li:first-child {
    margin-left: 0;
}
#gNavi .naviList li a {
	font-size: 1.6rem;
	font-weight: 400;
}
@media all and (min-width: 897px) {
    #gNavi .naviList li a:hover {
        opacity: 0.7;
    }
    #gNavi .menuBox {
		flex: 1;
        display: block !important;
    }
}
@media all and (max-width: 896px) {
  #gNavi .menu {
        width: 29px;
        height: 20px;
        position: absolute;
        right: 13px;
		top: 10px;
        cursor: pointer;
        z-index: 100;
        transition: opacity .25s ease;
        -webkit-transition: all .3s ease;
    }
    #gNavi .menu span {
        width: 100%;
        height: 1px;
        display: block;
        position: absolute;
        left: 0;
        top: 6px;
        background: #000;
        -webkit-transition: all .35s ease;
        transition: all .35s ease;
        cursor: pointer;
    }
    #gNavi .menu span:nth-child(2) {
        top: 16px;
    }
    #gNavi .menu span:nth-child(3) {
        top: 26px;
    }
    #gNavi .menu.on .top {
        -webkit-transform: translateY(7px) translateX(0) rotate(-45deg);
        -ms-transform: translateY(7px) translateX(0) rotate(-45deg);
        transform: translateY(8px) translateX(0) rotate(-45deg);
        background: #000;
    }
    #gNavi .menu.on .middle {
        opacity: 0;
        background: #000;
    }
    #gNavi .menu.on .bottom {
        -webkit-transform: translateY(-7px) translateX(0) rotate(45deg);
        -ms-transform: translateY(-7px) translateX(0) rotate(45deg);
        transform: translateY(-12px) translateX(0) rotate(45deg);
        background: #000;
    }
    #gNavi .menuBox {
		width: 100%;
        height: 100%;
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        overflow-y: auto;
        background: #DEEDF7;
        box-sizing: border-box;
        z-index: 5;
    }
    #gNavi .naviList {
        padding: 10vh 20px 20vh;
		margin: 0;
        width: auto;
        display: block;
    }
    #gNavi .naviList li {
        margin: 0;
    }
    #gNavi .naviList li a {
        padding: 15px 0;
        font-size: 1.7rem;
        letter-spacing: 0.05em;
        display: block;
		text-align: center;
        color: #000;
        border-bottom: 1px solid #FFF;
    }
    #gNavi .naviList > li:first-child {
        border-top: 1px solid #FFF;
    }
	#gNavi .naviList .tel {
		padding-bottom: 15px;
		border-bottom: 1px solid #FFF;
	}
	#gNavi .naviList .tel a {
		padding-bottom: 5px;
		border-bottom: none;
		font-weight: 700;
	}
	#gNavi .naviList .tel a .icon img {
		margin: 5px 10px 0 0;
	}
	#gNavi .naviList .tel .time {
		font-size: 1.4rem;
		font-weight: 400;
		color: #000;
		text-align: center;
		display: block;
	}
	#gNavi .naviList .btns{
		padding-top:15px;
	}
	#gNavi .naviList .btns a{
		color:#fff;
		border-bottom: none;
	}
}