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

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


#container{background:url(images/argile.svg) repeat top left;background-size:70% auto;background-attachment: fixed;}
.article-header{display:none;}

.main{background-color:rgba(255,255,255,0);padding:0;}
.outline{width:100%;max-width:1100px;margin:0 auto;}

.vdl{font-family: "vdl-gothicmincho", sans-serif;font-weight: 400;font-style: normal;}
.hilde{font-family: hilde-sharp, sans-serif;font-weight: 400;font-style: normal;}
.pfs_r{font-family: "pf-spine-regular", sans-serif;font-weight: 400;font-style: normal;}

/* 固定ページヘッダー */
.phead{color:#fff;margin:0;padding: 9% 0 3%;background:url(images/hd_title.png) no-repeat top left;background-size:cover;}
.phead h2{position:relative;z-index:2;font-family: hilde-sharp, sans-serif;font-weight: 400;font-style: normal;font-size: clamp(50px, 8vw, 135px);line-height:1.2;width:100%;max-width:80vw;margin:0 auto;}
.phead h2 span{display:block;font-family: noto-sans-cjk-jp, sans-serif;font-weight: 700;font-style: normal;font-size:26px;font-family: "vdl-gothicmincho", sans-serif;font-weight: 400;font-style: normal;}

.header-container-in.hlt-top-menu .logo-header{max-height:90px;z-index: 1;}
.header-container-in.hlt-top-menu .logo-header img{max-height:180px;}

/* パンくず */
.breadcrumb{color:#fff;text-align:right;width:100%;max-width:80vw;margin:0 auto;filter: drop-shadow(2px 2px 2px #000);}
.breadcrumb a{color:#fff;}

/* フォーム */
.form{margin:0 auto;width:100%;max-width:640px;background:#fff;}
.form iframe{width:640px;height:3000px;}

/* アコーディオン */
.accordion{margin: 0 auto 2rem;}
.accordion-content {display: none;}
.accordion-header {background: #e6e6e6;padding: 12px 45px 10px 20px;margin: 10px 0 0;transition: background .3s ease;cursor: pointer;position: relative;}
.accordion-header::before,.accordion-header::after{position:absolute;content:'';top:1px;right:20px;bottom:0;width:12px;height:2px;margin:auto;background:#4d4442;}
.accordion-header::after{transform:rotate(-90deg);transition:transform 0.3s;}
.accordion-header.active::after{transform:rotate(0deg);}
.accordion-content {background-color: #FFF;padding: 12px 20px 10px;}
.accordion-header span,.accordion-content span{padding-left:5px;position: relative;font-size: 18px;font-weight: 700;}

/* hover */
.accordion-header:hover {background-color: #F2F2F2;}

/* 注意事項 */
.list-design{background: rgba(255, 255, 255, .85);padding: 2rem 3rem 3rem;border-radius: 20px;}
ul{list-style-type: none;}

/* TOP */
.front_01{font-size:clamp(20px,4vw,27px);color:#fff;background: rgb(53 3 3 / 85%);text-align: center;width: 100%;max-width: 60vw;margin: 6rem auto 0;padding: 3rem 0;border-radius: 20px;}
.front_02{margin:0 0 2rem;}
.front_03{width:100%;max-width:60vw;margin:4rem auto 0;}

/* アニメーション */ 
.loop_wrap{display: flex;width: 100%;height: 180px;overflow: hidden;}
.loop_wrap div{flex: 0 0 auto;white-space: nowrap;font-size: clamp(120px, 9vw, 200px);overflow: hidden;line-height: 1;color: rgba(0, 0, 0, .65);}
.loop_wrap div:nth-child(odd) {animation: loop 50s -25s linear infinite;}
.loop_wrap div:nth-child(even) {animation: loop2 50s linear infinite;}

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

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

.entry-content>*{margin-bottom:0;}
.home .entry-content{margin-bottom:0;}
.home .article{margin-bottom:0;}

.footer{margin-top:0;}
.map_01{text-align:center;margin:3rem 0 0;}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	.outline{max-width:900px;}
}

/*834px以下*/
@media screen and (max-width: 834px){
	.header-container-in.hlt-top-menu .logo-header img{max-height:140px;}
	#container{background: url(images/argile.svg) repeat top left;background-size: 170% auto;}
	.front_01{max-width: 95vw;padding: 2rem 1rem;margin: 2rem auto 0;}
	.front_03{max-width:95vw}
	main.main{padding:32px 0;}
	.mobile-header-menu-buttons,.menu-content{background:#0c0000;}
	.mobile-menu-buttons{color:#fff;}
	.menu-drawer a{color:#fff;font-family: "vdl-gothicmincho", sans-serif;font-weight: 400;font-style: normal;font-size: 25px;}
	.mobile-menu-buttons .menu-caption{display:none;}
	.mobile-menu-buttons .menu-icon{font-size:28px;}
	.phead{padding: 11% 0 5%;}
	.form{width: 100%;max-width: 90vw;margin: 0 auto;}
	.outline{max-width:95vw;}
}

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