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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body{font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;}
.sp-br{display:none;}
.float2{display:none;}
.custom-nav{display:none;}
.custom-menu-trigger{display:none;}
main#main.main{padding:0;border:none;}
div#content.content.cf{margin-top:0;}
div#content-in.content-in.wrap{width:100%;}
.tagline{display:none;}
.content-in{justify-content:space-around;}
.fv{width:100%;position:relative;}
.logo{width:20%;}
.header-in {display:flex;justify-content:space-between;flex-direction:row;position:relative;width:90%;align-items:center;}
.header-nav{width:50%;}
.header-nav ul{display:flex;justify-content:space-between;padding-left:0;}
.header-nav ul li{list-style:none;}
.header-nav ul li a{text-decoration:none;color:#000;position:relative;}
.header-nav ul li a::after {position: absolute;left: 0;content: '';width: 100%;height: 2px;background:#005A9F;bottom: -5px;transform: scale(0, 1);transform-origin: left top;transition: transform 0.3s;}
.header-nav ul li a:hover::after {transform: scale(1, 1);}

.cf::after {display:none;}
.tel{text-align:center;}
.phone{color:#BF0000;font-size:150%;font-weight:500;}

.catch{text-align:center;font-size:180%;padding-top:30px;color:#005A9F;font-weight:500;  text-shadow: -2px -2px 0 white,2px -2px 0 white,-2px 2px 0 white,2px 2px 0 white,-2px 0 0 white,2px 0 0 white,0 -2px 0 white,0 2px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white,3px 3px 6px rgba(0, 0, 0, 0.7);}
.fvbx{display:flex;flex-direction:row;justify-content:space-between;width:80%;margin:auto;margin-top:30px;}
.fvprice{width:50%;}
.fvimg{width:50%;}
.per{line-height:1;}
.per1{font-size:10vw;color:#BF0000;font-weight:500;  text-shadow: -2px -2px 0 white,2px -2px 0 white,-2px 2px 0 white,2px 2px 0 white,-2px 0 0 white,2px 0 0 white,0 -2px 0 white,0 2px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white,3px 3px 6px rgba(0, 0, 0, 0.7);}
.per2{font-size:6vw;color:#BF0000;font-weight:500;  text-shadow: -2px -2px 0 white,2px -2px 0 white,-2px 2px 0 white,2px 2px 0 white,-2px 0 0 white,2px 0 0 white,0 -2px 0 white,0 2px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white,3px 3px 6px rgba(0, 0, 0, 0.7);}
.per3{font-size:2vw;text-decoration: line-through;}
.per4{font-size:2vw;padding:0 20px;}
.per5{font-size:3vw;}
.circlebx{display:flex;flex-direction:row;justify-content:space-between;width:50%;margin:auto;margin-bottom:50px;}
.circlectt{background:#005A9F;color:#fff;border-radius:50%;width:15vw;height:15vw;display:flex;align-items:center;justify-content: center;text-align: center; outline: 2px dotted #fff;outline-offset: -10px; font-size:150%;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);}


#reason{padding:100px 0;position:relative;width:100%;background:#F0FAFF;}
.h2-reason{text-align:center;margin-bottom:100px;font-size:2.5vw;}
.h2-reason::before{font-size:60%;content:"REASON";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.inner{width:80%;margin:auto;}
.reason-bx{display:flex;flex-direction:row;justify-content:center;gap:20px;flex-wrap:wrap;}
.reason-ctt{width:32%;background: #fff;padding: 30px;border-radius: 10px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}
.h3-reason{margin-bottom:30px;color:#005A9F;text-align:center;}

#product{padding:100px 0;position:relative;width:100%;}
.h2-product{text-align:center;margin-bottom:100px;font-size:2.5vw;}
.h2-product::before{font-size:60%;content:"PRODUCT";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.ppbx{display:flex;flex-direction:row;justify-content:flex-start;gap:20px;flex-wrap:wrap;margin:auto;}
.ppctt{display:flex;flex-direction:column;justify-content:center;gap:20px;width:32%;position:relative;}
.pptxt{width:100%;}
.ppimg{width: 300px;height: 250px;overflow: hidden;}
.h3-product{margin-bottom:30px;color:#005A9F;}
.per6{text-decoration: line-through;}
.per7{padding:0 20px;}
.per8{font-size:150%;color:#BF0000;font-weight:500;}
.per9{position:absolute;top:1.5vw;right:2vw;background:#BF0000;color:yellow;font-size: 1.2vw;padding: 5px 10px;}

#voice{padding:100px 0;position:relative;width:100%;background:#F0FAFF;}
.h2-voice{text-align:center;margin-bottom:100px;font-size:2.5vw;}
.h2-voice::before{font-size:60%;content:"VOICE";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.voicebx{display:flex;flex-direction:row;justify-content:space-between;}
.voicectt{width:32%;background: #fff;padding: 30px;border-radius: 10px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}
.vimg{text-align:center;margin-bottom:20px;}
.vimg img{width:40%;}
.voicename{text-align:right;margin-top:10px;}

.my-slider img {width: 100%;height: auto;aspect-ratio: 4 / 3; /* お好みの比率に */object-fit: cover;   /* はみ出しを整える */display: block;}

#news{padding:100px 0;position:relative;width:100%;}
.h2-news{text-align:center;margin-bottom:100px;font-size:2.5vw;}
.h2-news::before{font-size:60%;content:"NEWS";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.nlist{margin:50px 0;}
.post-ttl{padding:10px 0;border-bottom:solid 1px #005A9F;}
.post-ttl a{text-decoration:none;color:#666;}
.date{color:#005A9F;padding-right:10px;}
.more-btn {display: block;text-align: center;vertical-align: middle;text-decoration: none;width:300px;margin: auto;padding: 1rem 4rem;border-radius: 100vw;color: #fff;background: #005A9F;margin-top:50px;}
.more-btn:hover {background-position: right center;background-size: 200% auto;-webkit-animation: pulse 2s infinite;animation: shad26 1.5s infinite;color: #fff;}
@keyframes shad26 {0% {box-shadow: 0 0 0 0 #005A9F;}70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}}
.new-list{display:flex;flex-direction:row;justify-content:space-between;flex-wrap: wrap;width:100%;margin:auto;margin-bottom:50px;}
.new-list-box{width:30%;margin:20px 0;}
.new-list:after {content: "";display: block;width: 30%;height: 0;}
.new-list-box a{text-decoration:none;display:inline-block;color:#666;}
.new-list-box a :hover{opacity:0.7;}
.pagination{display:block!important;}
.pagination-next {display:none;}
.pnavi{display:flex;flex-direction:row;justify-content:center;margin-bottom:80px;}
.nav-links{display:flex;}
.pagination .page-numbers{display:inline-block;color:#005A9F;border:solid 1px #005A9F;background:#fff;margin:0;}
.pagination .current{color:#fff!important;background:#005A9F!important;border:solid 1px #005A9F;}
.pagination .next.page-numbers{width:40px;height:40px;}
.pagination .prev.page-numbers{width:40px;height:40px;}
.pagination a:hover{background:transparent;color:#005A9F;}


#contact{padding:100px 0;position:relative;width:100%;}
.h2-contact{text-align:center;margin-bottom:70px;font-size:2.5vw;}
.h2-contact::before{font-size:60%;content:"CONTACT";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.conp{font-size:150%;text-align:center;}
.more-btn2 {display: block;text-align: center;vertical-align: middle;text-decoration: none;width:300px;margin: auto;padding: 1rem 4rem;border-radius: 100vw;color: #fff;background: #005A9F;margin-top:50px;background-position: right center;background-size: 200% auto;-webkit-animation: pulse 1s infinite;animation: shad26 1.5s infinite;}
.more-btn2:hover {color: #fff;}

.footer {margin-top:0;}
.float{position:fixed;top:50%;right:0;background: #005A9F;text-decoration:none;text-align:center;writing-mode: vertical-rl;padding:10px 5px 20px 5px;display:flex;flex-direction:row;align-items:center;width:5vw;}
.float:hover{background-position: right center;background-size: 200% auto;-webkit-animation: pulse 1s infinite;animation: shad26 1.5s infinite;}
.fcon{font-size:150%;}
.ico{font-size:180%;padding-bottom:10px;border-bottom:dashed 1px #fff;width:100%;display:flex;align-items:center;}
.con{padding-top:10px;}

.under-inner{width:80%;margin:auto;padding:100px 0;}
.under-ctt{text-align:center;padding-bottom:50px;}
table tr:nth-of-type(2n+1) {background-color:transparent;}
.contact-table th{background:#fff;border-left:none;border-right:none;border-top:none;border-bottom:solid 1px #005A9F;}
.contact-table td{background:#fff;border-left:none;border-right:none;border-top:none;border-bottom:solid 1px #005A9F;color:#005A9F;font-weight:bold;}
.acceptance{text-align:center;margin-top:5vw;font-size:1.2vw;}
.must{background: #005A9F;color:#fff;font-size:80%;border-radius:10px;margin-left:10px;padding:5px 10px;}
.cbtn{text-align:center;margin-top:3vw;}
.cbtn p a{text-decoration:none;}
input[type='submit'] {display: block;text-align: center;vertical-align: middle;text-decoration: none;width:300px;margin: auto;padding: 1rem 4rem;border-radius: 100vw;color: #fff;background: #005A9F;}
input[type='submit']:hover {background-position: right center;background-size: 200% auto;-webkit-animation: pulse 2s infinite;animation: shad26 1.5s infinite;color: #fff;}
@keyframes shad26 {0% {box-shadow: 0 0 0 0 #005A9F;}70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}}

.h1-news{text-align:center;padding-top:100px;font-size:2.5vw;}
.h1-news::before{font-size:60%;content:"NEWS";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.h1-contact{text-align:center;padding-top:100px;font-size:2.5vw;}
.h1-contact::before{font-size:60%;content:"CONTACT";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.h1-company{text-align:center;padding-top:100px;font-size:2.5vw;}
.h1-company::before{font-size:60%;content:"COMPANY";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.h1-products{text-align:center;padding-top:100px;font-size:2.5vw;}
.h1-products::before{font-size:60%;content:"PRODUCTS";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.h1-thanks{text-align:center;padding-top:100px;font-size:2.5vw;}
.h1-thanks::before{font-size:60%;content:"THANKS";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.h1-faq{text-align:center;padding-top:100px;font-size:2.5vw;}
.h1-faq::before{font-size:60%;content:"FAQ";font-family: 'Marcellus';display:block;font-weight:normal;color:#005A9F;}
.thanksp{text-align:center;margin-bottom:50px;}

.accordion {margin:auto;margin-top:20px;}
.questionb {display: flex; justify-content: space-between; align-items: center; padding: 20px 0 0 0; cursor: pointer; border-top: 1px solid #005A9F;}
.questionb span{color:#005A9F;}
.q{height: 40px;width: 40px;border: solid 1px #005A9F;background:#005A9F;border-radius: 50%;display: inline-block;line-height: 40px;text-align: center;margin-right: 10px;color:#fff!important;}
.accordion .toggle-icon {  position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-block;line-height: 40px; text-align: center; background: #F2F2F2;}
.accordion .toggle-icon::before, .accordion .toggle-icon::after {  content: ''; position: absolute; width: 12px; height: 1px; background: #005A9F; top: 50%; left: 39%; transform: translate(-50%, -50%); transition: transform 0.2s ease;}
.accordion .toggle-icon::before { transform: rotate(90deg); }
.accordion .toggle-icon::after { transform: rotate(0deg); }
.accordion input[type="checkbox"] { display: none; }
.accordion input[type="checkbox"]:checked + .questionb .toggle-icon::before { transform: rotate(0deg); }
.accordion input[type="checkbox"]:checked + .questionb .toggle-icon::after { transform: rotate(90deg) scale(0); }
.accordion .answer {  max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.4s ease, padding 0.4s; position: relative; display: flex; flex-direction: row;align-items:center;}
.accordion input[type="checkbox"]:checked ~ .answer { max-height: 500px; padding: 15px 0 0 0; }
.accordion .answer::before {  content: ""; width: 0; height: 0; border-left: 12px solid #005A9F; border-top: 8px solid transparent; border-bottom: 8px solid transparent; position: relative; padding-right: 10px; top: 2px;}

.single .content{width:70%;margin:auto;}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*900px以下*/
@media screen and (max-width: 900px){
  /*必要ならばここにコードを書く*/
.header-nav{display:none;}
.custom-nav{display:block;}
.custom-menu-trigger{display:block;}	

.custom-overlay {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 9998;opacity: 0;transition: opacity 0.5s ease;} 
.custom-overlay.open {display: block;opacity: 1; }
body {transition: margin-left 0.5s ease;margin-left: 0;}

.custom-menu-trigger {position: fixed !important;top: 20px !important;right: 20px !important;width: 36px;height: 28px;cursor: pointer;z-index: 10000 !important;background: none;border: none;padding: 0;display: block !important; }
.custom-menu-trigger span {display: block;position: absolute;left: 0;width: 100%;height: 4px;background-color: #005A9F;transition: all 0.5s ease;border-radius: 2px; }
.custom-menu-trigger.active span {background-color: #fff;}
.custom-menu-trigger span:nth-child(1) {top: 0;}
.custom-menu-trigger.active span:nth-child(1) {transform: translateY(12px) rotate(-45deg);}
.custom-menu-trigger span:nth-child(2) {top: 12px;} 
.custom-menu-trigger.active span:nth-child(2) {opacity: 0;}
.custom-menu-trigger span:nth-child(3) {bottom: 0;}
.custom-menu-trigger.active span:nth-child(3) {transform: translateY(-12px) rotate(45deg);}
.custom-nav {position: fixed !important;top: 0 !important;right: 0 !important;width: 250px;height: 100vh;background-color:#005A9F;z-index: 9999 !important;transform: translateX(250px);transition: transform 0.5s ease;padding-top: 100px;overflow-y: auto; }
.custom-nav.open {transform: translateX(0) !important; }
.custom-nav ul {list-style: none;margin: 0;padding: 0;}
.custom-nav li {color: #fff;text-align: center;padding: 15px 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);transition: background-color 0.3s ease;}
.custom-nav li:hover {background-color: rgba(255, 255, 255, 0.1);}
.custom-nav a {color: #fff;text-decoration: none;display: block;font-size: 16px;}      	

.site-name-text-link {padding: 0;}
.sp-br{display:block;}
.custom-nav {width: 200px;transform: translateX(200px);}
.tel {display:none;}
.logo {width: 50%;}
.catch {width: 90%;font-size: 155%;margin:auto;}
.inner {width: 90%;}
.circlebx {width: 90%;margin-top: 30px;}
.circlectt {width: 28vw;height: 28vw;outline: 2px dotted #fff;outline-offset: -5px;font-size: 95%;}
.fvbx {width: 90%;align-items: center;}
.per1 {font-size: 12vw;}
.per2 {font-size: 7vw;}
.per3 {font-size: 4vw;}
.per4 {font-size: 4vw;padding:0 5px;}
.per5 {font-size: 7vw;}	
.per {line-height: 1.2;}
.per9 {font-size: 4vw;}
	
#reason {padding: 50px 0;}
.h2-reason {margin-bottom: 50px;font-size: 6vw;}
.reason-ctt { width: 100%;}
#product {padding: 50px 0;}
.h2-product {margin-bottom: 50px;font-size: 6vw;}
.ppctt {width: 100%;}
.pptxt {width: 100%;border-bottom: dashed 1px #000;padding-bottom: 15px;}
.voicebx {flex-wrap: wrap;gap: 20px;}
.voicectt { width: 100%;}
#voice {padding: 50px 0;}
.h2-voice {margin-bottom: 50px;font-size: 6vw;}
.vimg img {width: 25%;}
#contact {padding: 50px 0;}
.h2-contact {margin-bottom: 50px;font-size: 6vw;}
.conp {font-size: 120%;}

.float2{position:fixed;display:flex;background:#FF7F00;left: 0;padding:10px 5px; flex-direction:row;width: 50%;bottom: 0;text-decoration:none;}
.float { top: auto;right: 0;padding:10px 5px; flex-direction:row;width: 50%;bottom: 0;writing-mode: horizontal-tb;}	
.float br{display:none;}
.ico {font-size:150%;padding-bottom:5px;width:30%;align-items: center;justify-content: center;border:none;}
.econ{display:none;}
.con{padding-top:0;}	
.fcon{font-size:130%;}

.h1-news{font-size:6vw;padding-top:50px;}
.h1-contact{font-size:6vw;padding-top:50px;}
.h1-company{font-size:6vw;padding-top:50px;}
.h1-products{font-size:6vw;padding-top:50px;}
.h1-thanks{font-size:6vw;padding-top:50px;}
.h1-faq{font-size:6vw;padding-top:50px;}
.under-inner{width:90%;margin:auto;padding-top: 50px;}
.contact-table{margin-bottom:50px;}
.contact-table th{display:block;background:#005A9F;color:#fff;}
.contact-table td{display:block;}	
.must{background:#fff;color:#005A9F;}
.under-ctt {text-align: left;}
	
.single .content{width:90%;}	
}
	
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/


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