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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
html{overflow-x:hidden;scroll-behavior:smooth;}
body{background:#fff;font-family: 'Zen Old Mincho', sans-serif;overflow-x:hidden;}
.wrap{width:100%;}
.sp-br{display:none;}
#g-nav{display:none;}
.openbtn1{display:none;}
p{color:#5B3130;font-weight:500;}
a{color:#5B3130;transition:0.7s;text-decoration:none;font-weight:500;}
a:hover{color:#5B3130;opacity:0.7;}
h2{color:#5B3130;font-size:3rem;text-align:center;font-weight: 500;margin-bottom: 50px;}
h3{color:#5B3130;font-size:1.8rem;font-weight: 500;margin-bottom:20px;}
.inner{max-width:1200px;width:90%;margin:auto;}
.sp-br{display:none;}
.drawer{display:none;}
.ham-bx{display:none;}
div#header-in.header-in.wrap.cf {width:100%;}
main#main.main{padding:0;border:0;margin:0;}
.header-in{width:100%;margin-top:0;}
.logo-area{margin-bottom:50px;}
.header-ctt{max-width:1440px;width:100%;background:transparent;position:absolute;margin:auto;z-index:5;top:15%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);}
.content {margin-top:0;}
.header-nav{display:flex;align-items: center;justify-content:center;gap:50px;padding-left:0;}
.header-nav li{list-style:none;position:relative;}
.header-nav li a{font-size:1.2rem;color:#fff;}
.header-nav li {&:hover::after {scale: 1;}}
.header-nav li {&::after {content: "";position: absolute;top: -8px;left: -10px;display: grid;place-items: center;width: 40px;height: 40px;border-radius: 50%;background-color: #ffffff;transition: scale 0.2s;scale: 0;mix-blend-mode: difference;}}

.content {margin-top:0;}
.fv{position:relative;overflow:hidden;height:100vh;}
.fv-img img{width:100%;height:100vh;object-fit:cover;object-position: top;}
.catch{position:absolute;text-align:center;z-index:5;top:50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size:5rem;color:#fff;width:100%;}

.service{padding:150px 0;}
.service-bx{max-width:1100px;width:80%;display:flex;justify-content:space-between;gap:30px;margin:auto;}
.service-ctt{width:33%;position:relative;}
.service-ctt img{width:100%;display:block;filter:brightness(0.3);transition:filter 0.7s;}
.service-ctt:hover img{filter:brightness(0.7);}
.service-ctt p{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);-webkit-transform:translateY(-50%) translateX(-50%);width:100%;color:#fff;text-align:center;z-index:1;}
.jpn{font-size:0.8rem;}

.about{background:#E9E6DF;padding:150px 0;}
.about-bx{max-width:1000px;width:90%;display:flex;justify-content:space-between;gap:50px;margin:auto;align-items:center;}
.about-ctt{width:110%;}
.greetings{padding:150px 0;}
.rightp{text-align:right;margin-top:20px;}

.news{background:#E9E6DF;padding:150px 0;position:relative;}
.news-bx{max-width:1000px;width:90%;margin:auto;}
.news-ctt a{display:flex;gap:20px;}
.ninfo{display:flex;gap:20px;}
.news-ctt {border-bottom:solid 1px #5B3130;padding-bottom: 10px;margin-bottom: 20px;}
.ncate{background:#5B3130;padding:3px 10px;color:#fff;font-size:0.9rem;}

.more-bx{text-align:center;margin-top:70px;}
.more {position: relative;display: inline-block;width:200px;padding:10px 20px;text-align: center;text-decoration: none;border:1px solid #5B3130; background: none;transition: background-color .7s, color .7s;}
.more::after {content: "";position: absolute;top: 50%; right: -20px; width: 40px;height: 8px;transform: translateY(-50%) skewX(50deg) translateX(0);border: solid 1px currentColor; border-top: 0;border-left: 0;transition: transform .7s ease, border-color .7s ease;}
.more:hover::after {transform: translateY(-50%) skewX(50deg) translateX(10px);}


.footer{margin-top:0;}
.copyright{margin:30px 0;}
.footer-area .header-bx{margin-top:50px;}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1300px以下*/
@media screen and (max-width: 1300px){

}
	
/*1200px以下*/
@media screen and (max-width: 1200px){

}
	
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.sp-br{display:block;}
.service {padding: 70px 0;}
.service-bx {gap: 20px; flex-direction: column;}
.service-ctt {width: 100%;}
.service-ctt img {filter: brightness(0.7);}
.about {padding: 70px 0;}
h2 {font-size: 2rem;margin-bottom: 30px;}
.about-bx {gap: 20px;flex-direction: column;}
.about-ctt {width: 100%;}
h3 {font-size: 1.6rem;margin-bottom: 10px;}
.greetings{padding: 70px 0;}
.reverse{flex-direction: column-reverse;}
.news{padding: 70px 0;}
.news-ctt a {gap: 10px;flex-direction: column;}
.more-bx {margin-top: 50px;}
.more {width: 150px;padding: 5px 20px;}
.header-bx{display:none;}
.logo-header img {width: 100px;}
.header-ctt {top: 10%;left:15%;}
.catch {font-size: 3.5rem;}
	
#g-nav{display:block;position:fixed;z-index:10;top:0;right: -120%;width:100%; height: 100vh;background:#E9E6DF;transition: all 0.6s;}
#g-nav.panelactive{right: 0;}
#g-nav.panelactive #g-nav-list{position: fixed;z-index: 999; width: 100%; height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;}
#g-nav ul { position: absolute;z-index: 999;top:50%;left:50%;transform: translate(-50%,-50%);padding-left:0;}
#g-nav li{ list-style: none;text-align: center;}
#g-nav li a{color:#5B3130;font-size:120%;text-decoration: none;margin-bottom:20px;display: block;}
.openbtn1{display:block;position:fixed;z-index: 9999;top:30px;right: 20px;cursor: pointer;width: 50px;height:50px;}
.openbtn1 span{display: inline-block; transition: all .4s; position: absolute;left: 14px;height:2px;background-color:#5B3130;width: 60%;}
.openbtn1 span:nth-of-type(1) {top:15px; }
.openbtn1 span:nth-of-type(2) {top:23px;}
.openbtn1 span:nth-of-type(3) { top:31px;}
.openbtn1.active span:nth-of-type(1) { top: 18px;left: 18px;transform: translateY(6px) rotate(-45deg); width: 60%;}
.openbtn1.active span:nth-of-type(2) { opacity: 0;}
.openbtn1.active span:nth-of-type(3){ top: 30px;left: 18px; transform: translateY(-6px) rotate(45deg);width: 60%;}
}

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

}

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

}