@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
/*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");*/


/*テンプレート専用cssファイルの読み込み
-----------------------------------------------------------------------
@import url("slide.css");
@import url("inview.css");
----*/

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--bk-color: #fff;		
	--m-color: #0d491c;
	
	--space-large: 8vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
	--space-small: 2vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
    --space-large_: 10vh;
    
    --en: "futura-pt", sans-serif;
    --ja: "kozuka-gothic-pr6n", sans-serif;
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
	font-size: 13px;/**/	/*基準となるフォントサイズ*/
	height: 100%;
    font-weight: 500;
}

	/*画面幅1200px以上の追加指定*/
	@media screen and (min-width:1200px) {

	html, body {
		font-size: 14px;/**/
	}

	}/*追加指定ここまで*/

	/*画面幅1600px以上の追加指定
	//*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: var(--ja);/**/
	-webkit-text-size-adjust: none;
	background: var(--bk-color);	/*背景色*/
	color: var(--m-color);		/*文字色*/
	line-height: 2;		/*行間*/
}

/*リセット他*/
figure {margin: 0;}
dd {margin: 0;}
nav ul {list-style: none;}
nav,ul,li,ol {margin: 0;padding: 0;}
section li {margin-left: 1rem;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*input*/
input {font-size: 1rem;}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*section*/
section {
	/*overflow-x: hidden;*/
     max-width: 1200px;
    margin: 0 auto;
   text-align: center;
    
    
	
}

/*共通flexbox
---------------------------------------------------------------------------*/
.flexbox{
    display: flex;
    align-items: center;
    justify-content: center;
}
.fitem1{flex-basis: 35%;}
.fitem2{flex-basis: 65%;}

.fitem{flex-basis: 50%;}




/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
    text-decoration: none;	
}


a:hover {
	text-decoration: none;	
	opacity: 0.9;			
}


/*container
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	position: relative;
	flex-direction: column;
	justify-content: space-between;/**/
   
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/


.c_tz{
    
   background-color: #fff;
   position: fixed;
    z-index: 9;
    width: 100%;
}/**/

header {
    width: 90%;
	flex-shrink: 0;
	display: flex;					
	align-items: center;			
	justify-content: space-between;
	height: 80px;					
    max-width: 1200px;
    z-index: 99;
    top:0;
    background-color: #fff;
    margin: 0 auto;
   text-align: center;
}




#logo img {display: block;}
#logo {
	margin: 0;padding: 0;
	width: 10vw;	/*ロゴの幅*/
	position: relative;
    z-index: 1;
    left:10px;
  
}
	@media screen and (max-width:749px) {
	
	#logo {
		top: 0;	
		width: 120px;
        
	}

	}


/*ヘッダー内メニュー
---------------------------------------------------------------------------*/

/*900px未満では非表示*/
header nav ul {display: none;}
.top_icon{display: none;}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	.top_icon{display: flex;margin-right: 5vw;	/*ハンバーガーアイコンに重ならないように余白*/}	
	/*メニューブロック全体の設定*/
	header > nav > ul {
		
		display: flex;		
        align-content: center;
        justify-content: center;
	}

	/*メニュー１個あたりの設定*/
	header nav li a {
		display: block;
        font-family: var(--en);
        font-weight: 700;
        text-decoration: none;
		font-size: 1.1rem;		/*文字サイズ90%*/
		padding: 0.5rem 1rem;	/*メニュー内の余白。上下、左右へ。*/
	}
	
	}




/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;width: 100%;}
#menubar ul li{ position: relative;}
#menubar a {display: block;text-decoration: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}




/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {right: -100vw;}
	100% {right: 0px;}
}

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;
    overflow: auto;
    z-index: 100;
	right: 0px;top: 0px;
	max-width: 800px;
	height: 100%;
    width: 25%;
	padding: 90px 0 ;	/*ブロック内の余白。上、左右、下への順番。*/
	background:#e6eed7;	/*背景色*/
	color: var(--m-color);					/*文字色*/
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
    font-family: var(--en);
    font-weight: 700;
    font-size: 1.5rem;
   
}

/*子メニューの設定*/
.small-screen #menubar ul ul {
    font-size: 1rem; 
    font-weight: 600;
   
}

/*メニュー１個あたりの設定*/
.small-screen #menubar nav ul li {
	width: 100%;
    
}
.menu_li_flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.li_lgn{
    background-color: #ecf3e3;
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 3vw;	/*メニュー内の余白。上下、左右へ。*/
}
.down_icon{  
  width: 10px;
  height: 10px;
  border: 1px solid;
  border-color:  transparent transparent var(--m-color) var(--m-color);
  transform: rotate(-45deg);
    
}

.down_box{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 20px;
    padding: 0 6px 5px 6px;
    border-radius: 50%;
}

.btn_top{
    width: 80%;
    margin: 10% 10% 0 10%;
    color: var(--m-color);
    text-align: center; 
    border: solid 2px var(--m-color);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.up_icon{
    width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--m-color);
    margin-left: 10px;
}
/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;
    z-index: 101;
	cursor: pointer;
	top: 0px;		/*上からの配置場所*/
	right: calc(var(--space-small) + 5px);		/*右からの配置場所*/
	width: 60px;		/*幅*/
	height: 60px;		/*高さ。基本的にheaderの高さに合わせておけばOKです。*/
	padding: 20px 0;	/*ここの20pxの数字を変更すると2本のバーの上下間のバランス調整ができます*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 3px;			/*線の太さ*/
	border-radius: 3px;
	background-color: var(--m-color);	/*線の色。*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下変更不要*/
#menubar_hdr div {
	position: relative;width: 100%;height: 100%;
	display: flex;flex-direction: column;justify-content: space-between;
}
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {top: 50%;transform: translateY(-50%) rotate(-45deg);}



/*main
---------------------------------------------------------------------------*/
main {
	
	
    padding: 0;
 /*background-color: aquamarine;
	padding: 6vw 0 0;overflow-x: hidden;flex: 1 0 auto;*/
}


main h2 {
    font-family: var(--en);
	
}/**/



/*footer
---------------------------------------------------------------------------*/

footer a {color: inherit;text-decoration: none;}
footer small {font-size: 100%;}

footer {
	background:var(--m-color);		
	color:  var(--bk-color);	
	font-size: 0.85rem;	
	padding:5vw;		
    border-radius: 30px 30px 0 0;
    
}


.footer_flex{
  
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding: 0;
}
.f1{flex-basis: 30%;order:1;}
.f2{flex-basis: 70%;order:2;}
.footer_menu{
    list-style: none;
	margin: 0 auto;padding: 0;
    text-align: center;
    width: 100%;
	display: flex;
    font-family: var(--en);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
   
    
        
}
.b_li{flex-basis: 25%;position: relative;}
.b_li::before{
    content: '';
    position: absolute;
    width: 1px;
    height: 13px;
    background-color: #fff;
    right: 0%;
    top:0;
    
}
.b_li:last-child::before{
    display: none;
}


.li_s{
    font-weight: 500;
    font-size: .9rem;
    line-height:3;
}
.li_s_{
    line-height: 2.5;
}

footer h3 {
	font-weight: 500;	
	font-size: .7rem;	
    padding: 0;margin: 0;
    letter-spacing: .1rem;
}
footer h3 span{
    font-family: var(--en);
    font-weight: 700;
    font-size: 1.3rem;
}

.f2_flex{
    display: flex;
    align-items: flex-end; 
    text-align: left;
}


.f2_flex p{padding: 0;margin: 0;
}
.ad{margin:0 7%;}




/*#concept
---------------------------------------------------------------------------*/
#concept{}
.top_h2{
   
   /*padding: 20% 0;*/
    box-sizing: border-box;
    margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
    flex-wrap: wrap;
   height:90vh;
    overflow: hidden;
}
/**/



.js-ttl{
    
    display: flex;
    align-items:baseline;
    justify-content:center;
    margin: 0;
    padding: 0;/**/
    
}
.js-ttl .catch{
    display: inline-block;
    font-size: 5rem;
   line-height: 1.8;
    text-align: center;
    margin: 0;
    padding: 0;
    
    
}
.js-ttl .catch_x{font-size: 2.5rem;}
.catch_s{
    font-size: 1.6rem;
    text-align: left;
    font-weight: 900;
}
.catch_s2{
    font-size: 1.3rem;
    text-align: left;
    font-weight: 700;
    padding: 2% 0;
}
.catch_s_sp,.catch_s2_sp{display: none;}
.f_catch{
    margin: 10% 0;
    position: relative;

}

.c_icon{width: 8rem;}
.c_icon2{width: 17rem;}
.w_back{
    background-color: #fff;
    position: relative;
    border-radius: 30px 30px 0 0;
    background-image: url("../img/BG_logo_green02.png");
  background-size: contain;
  background-repeat: no-repeat;
    background-position: right;
    background-attachment: fixed;
    overflow: hidden;
    
    
}
.w_back2{background-image: none;}

.gn_back{
    background-color: #e5eed6;
    position: relative;
   border-radius: 30px 30px 0 0;
  background-image: url("../img/BG_logo_green01.png");
  background-size: auto;
  background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
   
  
}
.gn_back_{background-image: none;}


.block{padding: var(--space-large) 0;}
.c_txt{overflow: hidden;}

.accordion {
  height: 500px;

}
/*brand
---------------------------------------------------------------------------*/

#brand{
    
    border-radius: 30px 30px 0 0;  
}
.b_box{
    width: 100%;
    margin: 5% 0 0 0;
    background-color: #fff;
   border-radius: 30px;
    padding-bottom: 1vw;
}
.b_img{
    flex-basis: 60%; 
    width: 60%;
    border-radius:30px 0 0 0;
     
     }
#babydoll{padding-bottom: 5vw;}

.b_img_1{/*linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),*/
  
  /*---↓↓Babydoll画像変更こちらへ↓↓----*/
  background-image: url("../img/bd_img.jpg");
  background-size: cover;
  position: relative; 
 background-position: center;
    height: 450px;
}

.b_logo{flex-basis: 40%; }
.b_ttl{color:#E22222;}
.b_txt{font-weight: 700;text-align: left;color:#000;}
.btn{
    font-family: var(--en);
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    padding: 5px 3vw;
    border-radius: 30px;
    background-color: var(--m-color);
    color:#fff;
}
.f_tz{margin:1vw 0;}/**/
.b_icon{margin-left: 1vw;}
.inbox{width: 90%;margin:0 5%;}
.inbox>.flexbox{justify-content: space-between; }
.fitem3{flex-basis: 32%;}
.inbox>.flexbox>.fitem3 img{border-radius: 15px;border: solid 1px #f0f0f0;}

.inbox h2{
    margin-bottom: 40px;
    border-bottom: solid 1px #f0f0f0;
    padding: 20px 0; 
    text-align: center;
  overflow: visible;
}

.inbox h2::before{
    content: 'COLLABORATION ARCHIVES';
    display: inline-block;
  position: relative;
  bottom: -40px;
  padding: 0 3px;
  background: #fff;
}
.inbox .inbox_h2_2::before{
   content:'DESIGN STORY' ;
}
.s_box{
    border-radius: 30px;
    
}

.bnr_modal_pc{display: block;}
.bnr_modal_sp{display: none;}

.btn_1{
    color: #000;
    font-size: .9vw;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    padding: 5px 15px;
    border:solid 1px #000;
    border-radius: 30px;
}
.s_box>a{text-decoration: none;}




.b_ttl_bl{
    color:#000;
}


.b_pbox{margin-top: 10%;}
.b_dbox{margin-top: 10%;padding-bottom: 0;}


.b_img_2{
  height: 450px;
    /*---↓↓PH画像変更こちらへ↓↓----*/
 background-image: url("../img/ph_img.jpg");
  background-size: cover;
  background-position: center;
  position: relative; 
 border-radius:30px 0 0 0;
    
}
.b_img_3{ height: 450px;
    /*---↓↓disney画像変更こちらへ↓↓----*/
 background-image: url("../img/dis_img.jpg");
  background-size: cover;
  background-position: center;
  position: relative; 
 border-radius:30px 0 0 0;}


.b_ttl_pk{color:#fbb0cf;}
#disney{position: relative;}

.discopy{
    position: absolute;
    right: 15px;
    bottom:10px;
    color: #000;
    font-size: .9rem;
}



/*----service-----------------------------------------------------------*/
#service{border-radius: 30px 30px 0 0;}
.se_box{width: 90%;margin: 5%;}
.b_txt_gn{color: #0d491c;font-weight: 500;}
.workflow{margin-top: 2%;}
.sw_pc{display: block;}
.sw_sp{display: none;}

/*----history-----------------------------------------------------------*/
.sticky_mum{
    overflow:inherit;
    background-position: center;}

#history{
    position: relative; 
}


.his_ttl{
    margin: 0 auto;
    padding: 3% 0;
    text-align: center;
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top:0;
    z-index: 3;
    background-color: #e5eed6;
    border-radius: 30px 30px 0 0;
}


.his_ttl::before{
  position: absolute;
  content: '';
  top: 0;
  left:30%;
  display: block;
  width: 5px;
    height: 100%;
 background-color: #a8c184;
    
 
}


.histoyAll{padding-top: 5%;position: relative;z-index: 0;}
.histoyAll::before{
  position: absolute;
  content: '';
  top: 0;
  left:30%;
  display: block;
  width: 5px;
    height: 100%;
 background-color: #a8c184;
 
}
.his_flex{
    align-items: flex-start;

}
.lasthis{
    background-color: #e5eed6;
    height: 100px;
    position: sticky;
    bottom:0;
    z-index: 2;
}

.lasthis::before{position: absolute;
  content: '';
  top: 0;
  left:30%;
  display: block;
  width: 5px;
    height: 100%;
 background-color: #a8c184;}
.year{
    flex-basis: 30%;
    position: relative;
    z-index: 1;
    text-align: right;
     
}
.year_icon{margin-right:25px;}

.news{
    flex-basis: 70%;
    position: relative;
    z-index: 1;
    border-left: solid 10px #a8c184;
    margin-left: -5px;
}

.new {
    padding:0 5%;
    display: grid;
    grid-template-columns: auto 1fr;/*横並びの指定。日付とアイコン部分の幅*/
	margin: 0 auto;
    text-align: left;
    font-weight: 500;
}

/*日付、記事（共通）*/
.new dt,.new dd {
padding-bottom: .8rem;
}

/*日付*/
.new dt {
	padding-right: 1rem;			
    font-family: "bebas-neue-pro", sans-serif;
    font-weight: 700;
    font-size: 1.3vw;
    line-height: 1.2;
}

.new dd{
    line-height: 1.5;
}
.new span{color: #678135;}


.new::before{
  position: absolute;
  content: '';
  top: -2%;
  left:-16px;
  display: block;
  width: 15px;
    height: 15px;
 background-color: #fff;
    border-radius: 50%;
    border:solid 5px var(--m-color);
 z-index: 2;
}



/*--------------------profile-------------------------------------*/
.pr_box{width: 50%;margin: 7% 25%;}

.new_pr{
    display: grid;	/*gridを使う指定*/
    grid-template-columns: auto 1fr;	
    text-align: left;
    font-weight: 500;
}

.new_pr dt , .new_pr dd{
padding: 1vw;
 border-bottom: solid 1px var(--m-color);    
}

.new_pr dt{
  padding-right: 2rem; 
}

.last_btn_box{
    width: 70%;
    margin: 5% 15%;
    align-items: flex-start;
}
.last_btn_box .c_icon{margin-bottom: 3%;}
.btn_2{
    width: 80%;
    margin:0 10%;
    background-color: var(--m-color);
    padding: 10% 0;
    color:#fff;
    font-weight: 700;
    font-size: 1vw;
    border-radius: 30px;
}

.s_link{
    color: #ff0000;
    font-size: .9rem;
    font-weight: 700;
    margin-top: 2%;
}
.s_link img{margin-right: 5px;}




/*sp
----------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:768px) {
 
    header{height: 60px; position: fixed;width: 100%;}
section{margin: 0 5%;}
    .top_h2 {/*height: 93vh;*/}

  /*.gn_back_tz{margin-top: -1150px;}*/  
.catch_s,.catch_s2{display: none;line-height: 1.7;}   
.catch_s_sp,.catch_s2_sp{ 
    width: 80%;
    display: block;
    text-align: center;
    }   
.catch_s_sp{
    margin: 6vh auto; 
    font-size: 5.5vw; 
}

.catch_s2_sp{
    margin: 3vh auto;
    font-size: 3.8vw;
    
}

.f_catch{
    display: block;
   margin: 20% 0;    
}  
    
.c_icon{width: 20vw;} 
.c_icon2{width: 40vw;} 
    
    .gn_back{
        border-radius: 20px 20px 0 0;
    } 
    
    .w_back{ border-radius: 20px 20px 0 0;}
    

    .w_back{
    background-position: top;
  
    
}
    .block{
        padding: var(--space-large_) 0;/**/
    }  

 .b_box{
   
    margin: 15% 0 0 0;
    border-radius: 20px;
    padding-bottom: 10vw;
}   
    .b_box .flexbox{
     flex-wrap: wrap;   
    }  
 .b_img{
    flex-basis: 100%; 
    width: 100%;
    border-radius:20px 20px 0 0;
     }

.b_logo{
    flex-basis: 100%; 
    margin: 10% 0 3% 0;
    display: block;
    }    
    .bd_logo{width: 25%;} 
    
 .f_tz,.b_img{display: block;}  
    
	#babydoll{padding-bottom: 10vw;}

    .f_tz .fitem1,.f_tz .fitem2{
        flex-basis: 90%;
        width: 90%;
        margin-left: 5%;
    }
    .b_img .fitem1{margin-bottom: 5%;}
.b_ttl{font-size: 5vw;line-height: 1;display: none;}
    
    .b_logo div{margin: 3vw 0;}
    .btn{padding: 10px 20vw;font-size: 3vw;}
    .b_icon{margin-left: 0;}
    .b_icon img{width: 50px;}
    
  .bnr_modal_pc{display: none;}
.bnr_modal_sp{display: block;}  
    
  
    .ph_logo{width: 40%;}
    .b_img_1,.b_img_2,.b_img_3{height: 350px;}
    .dislogo{width: 30%;}
   
    .se_box{
       margin-top: 15%; 
    }
    .sw_pc{display: none;}
    .sw_sp{display: block;}
    .workflow{margin-top: 7%;}
 .fitem3{flex-basis: 48%;padding-bottom: 4%;}
      
 #history::before{
  top: -4%;
  left:0%;
  width: 100%;
}

.his_ttl{
    padding: 15% 0;   
}

.his_ttl::before{
  left:3%;
  width: 4px;
}

    
.his_flex{display: block;}
    
 
.year{
   margin-left: 3%; 
  flex-basis: 100%;
  border-left: solid 4px #a8c184; 
  text-align: left;
  padding: 0 0 8% 5%;
}
    .year_tz{margin-left: 2.5%;border-left: solid 8px #a8c184;}
  
.year_icon{width: 25vw;margin-right: 0;}

.news{
    flex-basis: 100%;
    margin-left: 2.5%;
   border-left: solid 8px #a8c184;
}
.lasthis::before{position: absolute;
  left:3%;
  width: 4px;
  }

.new dt {
    font-size: 2rem;  
}


.new::before{
  top: -5px;
  left:-12px;
  border:solid 4px var(--m-color);
  width: 10px;
  height: 10px;
  
}
.histoyAll{padding-top: 0;}
.histoyAll::before{
 display: none;
}


.t_box{margin-left:2.5%;}

   
    
.pr_box{width:95%;margin: 15% 2.5%;}


.new_pr dt , .new_pr dd{
padding: 2vw;
   
}

.new_pr dt{
  padding-right: 2rem; 
}

.last_btn_box{
    width: 100%;
    margin: 5% 0;
    display: block;
}
    
.last_btn_box .fitem{margin-bottom: 15%;}
    
.last_btn_box .c_icon{margin-bottom: 3%;}
    
    
    
.btn_2{
    width: 70%;
    margin:0 15%;
    padding: 5% 0;
    font-size: 3vw;
  
}

.s_link{
    font-size: 1rem;
    margin-top: 3%;
}
.s_link img{margin-right: 10px;}
    
    


footer a {color: inherit;text-decoration: none;}
footer small {font-size: 100%;}

footer {padding: 15vw 0;}
    .footer_menu{
        flex-wrap: wrap;
    }
.b_li{
    flex-basis: 100%;
    position: relative;
    font-size: 2rem;
    padding-bottom: 7%;}
.b_li::before{
    display: none;
}

.f1,.f2{flex-basis: 100%;width: 100%; margin-bottom: 5%;}
    .f1_tz{order:2;}
    .f2_tz{order:1;}
    
    .footer_logo{width: 30%;}
    .li_s{font-size: 1.5rem;}
    .li_s_{font-size: 1.5rem;text-decoration: underline;}

    footer h3 {	
	font-size: 1.3rem;	  
}

footer h3 span{
    font-size: 2.5rem;
}

.f2_flex{
    display: block;
}


.f2_flex p{
    padding: 0;
    margin: 0;
    font-size: 1.5rem;/**/
   
}
    
.s_link{
    font-size: 1.5rem;
    
}
.ad{margin:0;text-align: center;}

    .copy{
        text-align: center;
        margin: 0 auto;
        width: 100%;
        padding-top: 10%;
        font-size: 1.2rem;
    }  
    
    
.small-screen #menubar.display-block {
    width: 50%;
    /*font-size: 1.1rem;*/
}

.small-screen #menubar a {
	padding: 1rem 10%;	
}

.small-screen #menubar ul ul {
    /*font-size: .9rem;*/ 
    font-weight: 600;
   
}

.down_icon{  
  width: 7px;
  height: 7px;
  
}

.down_box{

    height: 15px;
    padding: 0 5px 3px 5px;
    
}
    .discopy{
    
    font-size: 1.3rem;
}

}


/*---------------------------------------------------------------------*/
.modal-checkbox {
  display: none;
}

.modal-open-button {
  cursor: pointer;  

}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 60%);
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  transform: translate(50%, -50%);
}

.modal-wrapper {
  position: relative;
  width: 90%;
  max-width: 800px;
  max-height: 70%;
  padding: 3%;
  margin: auto;
  overflow: scroll;/**/
  background-color: #fff;
  border-radius: 5px;
}

.modal-content{
    text-align: left;
    width: 60%;
    margin-left: 5%;
    color: #000;
}
.modal-content h1 {
  margin: 0;
  font-size: 1.7rem;
 color: var(--m-color);
  /*line-height: 1.2em;
  letter-spacing: -0.02em;*/
}

.modal-checkbox:checked + .modal {
  display: flex;
}

#modal .flexbox{
    align-items:flex-start;
    
}
.btn_modal{
    width: 60%;
    margin:10% 20%;
    cursor: pointer;
    padding: 2% 0;
}



#modal2 .pr_box{width: 80%;margin: 7% 10%;}
#modal2 .pr_box h2{line-height: 1.5;}
#modal2 .pr_box h2 span{font-size: .9rem;line-height: 1;}
#modal2 h3{line-height: 1.8;}
#modal2 dl{border-top: solid 1px var(--m-color);}
#modal2 .btn_modal{
    width: 50%;
    margin:10% 25%;
   
}

#modal2 .btn_2{
    width: 50%;
    margin:0 25%;
    padding: 5% 0;
    
}

@media screen and (max-width:768px) {
    .modal-wrapper .flexbox{
        display: block;
        margin: 7% 0;
    }
    .modal-wrapper .flexbox .fitem1,
    .modal-wrapper .flexbox .fitem2{
        flex-basis: 100%;
        padding: 0;
    }
    
    .modal-content{
    
    width: 90%;
    margin:10% 5% 0 5%;
   
}
  .modal-content h1 {font-size: 2.5rem;}/**/
  #modal2 .pr_box{width: 95%;margin: 7% 2.5%;}
   #modal2 .new_pr dt{padding-right: 1rem; }
    
#modal2 .btn_2{
    width: 70%;
    margin:0 15%;
    padding: 5% 0;
    
}
    
}









/*--------------------gasp ---------------------*/

.c-loader-bg{
    position: fixed;
    top:0;left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--m-color);
    z-index: 100;
    display: grid;/**/
    place-items:center;
    pointer-events: none;
  
}

.loader-logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; 
    
}
/*.logo_ac{display: none;}
.logo_ac_{display: block;}*/

/*!importanをつければ最優先で使用してくれる*/
@media only screen and (max-width: 599px) {
    html{
        font-size: 50%;
    }
}



.cls-1 {
        fill: #4da82f;
       
      }

      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7 {
        stroke-width: 0px;
      }

      .cls-2 {
        fill: none;
      }

      .cls-3 {
        fill: #cfcece;
      }

      .cls-4 {
        fill: #fff;
    
      }

      .cls-5 {
        fill: #dcdddd;
      }

      .cls-8 {
        clip-path: url(#clippath);
          
      }

      .cls-6 {
        fill: #246f14;
       
      }

      .cls-7 {
        fill: #efefef;
           
      } 

svg{width: 200px;margin: 0;padding: 0;}

.logo-txt{
    color:#fff;
    font-size: 40px;
    font-weight: 700;
    font-family: var(--en);
    margin: -20px auto 0 auto;
    width: 100%;
    text-align: center;
    line-height: 0;
    letter-spacing: .1rem;
}

@media only screen and (max-width: 599px) {
    svg{width: 150px;}
}