@charset "UTF-8";
html{
font-family: 'Kosugi Maru', sans-serif;
height: 100%;
overflow: auto;
overscroll-behavior-y: contain;
}

li{
list-style-type: none;
}

h1{
text-align: center;
font-size: 2.8rem;
margin-bottom: 72px;
}

span{
display: block;
font-size: 2.4rem;
color: #AAA;
}

#header h1 span{
font-size: 4rem;
}



ul{
margin: 0;
padding: 0;
}

p{
line-height: 1.8;
}

body {
margin: 0px auto;
padding: 0px;
text-align: left;
background-color: #EBE9E0;
color: #333;
width: 100vw;
}

div.main_contents{
/*max-height:  680px;*/
padding-top: 100px;
}


/*
div.main_contents video{
width: 100%;
}
*/

div.main_contents img{
width: 100%;
height: 50vw;
}



header{
position: fixed;
z-index: 998;
width: 100vw;
opacity: 0.9;

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100px;
background-color: #fff;
transition-duration: .8s;
}


main{
padding-top: 0;
}

#g-nav ul{
list-style-type: none;
display: flex;
justify-content: space-between;
align-items: center;
width: 800px;
}

#g-nav ul li{
color: #000;
font-size: 1.6rem;
margin: 10px;
}

#g-nav ul li a{
color: #000;
text-decoration: none;
}

#g-nav ul li a span{
color: #fff;
border: 10px solid #646464;
border-radius: 30px;
background-color: #646464;
}

header h1#logo{
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}

header h1#logo a{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
display: block;
background-image: url("../img/logo.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

header h1 a{
display: block;
height: 70px;
/*display: flex;*/
flex-direction: row;
align-items: center
}

h1#about{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/w_kasekimikke.png");
background-size: contain;
background-repeat: no-repeat;
}

h1#point{
text-indent: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/title_toku.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

h1#point::before{
content: "";
padding: 20px 0;
}

h1#asobikata{
text-indent: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/title_asobi.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

h1#naiyoubutsu{
text-indent: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/title_naiyo.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

h1#gallery{
text-indent: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/title_gallery.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

h1#kansyu{
text-indent: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/title_kansyu.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

h1#story{
text-indent: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/title_story.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

h1#question{
text-indent: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/title_faq.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

h1#specification{
text-indent: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 5rem;
background-image: url("../img/title_siyo.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

#wrapper {
margin: 0px auto;
text-align: left;
overflow: hidden;
}

div.container{
margin: 0 auto;
margin-bottom: 200px;
width: 80vw;
}

div.container:last-child{
margin-bottom: 72px;
}


/*==================================================
ナビゲーションのためのCSS
==================================================*/

#g-nav ul{
flex-direction: column;
}

#g-nav.panelactive{
position:fixed;
z-index: 999;
top: 0;
width:100%;
height: 100vh;
}

/*丸の拡大*/
.circle-bg{
position: fixed;
z-index:3;
/*丸の形*/
width: 100px;
height: 100px;
border-radius: 50%;
background: #999;
/*丸のスタート位置と形状*/
transform: scale(0);/*scaleをはじめは0に*/
right:-50px;
top:-50px;
transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
display: none;/*はじめは表示なし*/
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
opacity: 0;/*はじめは透過0*/
/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}


@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
text-align: center; 
list-style: none;
}

#g-nav li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

#g-nav ul li a{
color: #fff;
}


/*==================================================
×ボタンのためのCSS 
==================================================*/
.openbtn{
position:fixed;
right: 30px;
z-index: 9999;/*ボタンを最前面に*/
cursor: pointer;
width: 50px;
height:50px;
}
	
/*×に変化*/	
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #000;
width: 45%;
}

.openbtn span:nth-of-type(1) {
top:15px;	
}

.openbtn span:nth-of-type(2) {
top:23px;
}

.openbtn span:nth-of-type(3) {
top:31px;
}

.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}




/*==================================================
メインビジュアルスライダー
==================================================*/
.slider {
  position:relative;
	z-index: 1;
	height: 100vh;
}

.slider-item01 {
background:url("../img/mainvisual_1.png");
}

.slider-item02 {
background:url("../img/mainvisual_2.png");
}

.slider-item03 {
background:url("../img/mainvisual_3.png");
}

.slider-item04 {
background:url("../img/mainvisual_4.png");
}

.slider-item {
    width: 100%;
    height:100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/*

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    height: 25px;
    width: 25px;
}

.slick-prev {
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {
    right:2.5%;
    transform: rotate(45deg);
}
*/

/*
.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;
    height:8px;
    display:block;
    border-radius:50%;
    background:#ccc;
}

.slick-dots .slick-active button{
    background:#333;
}
*/



/*==================================================
商品ラインナップスライダー
==================================================*/
.slider2 {
    width:94%;
    margin:0 auto;
}

.slider2 img {
    width:30vw;
    height:auto;
}

.slider2 .slick-slide {
	transform: scale(0.5);
	transition: all .5s;
	opacity: 0.5;
}

.slider2 .slick-slide.slick-center{
	transform: scale(1);
	opacity: 1;
}


.slider2 .slick-prev, 
.slider2 .slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    height: 15px;
    width: 15px;
}

.slider2 .slick-prev {
    left: -1.5%;
    transform: rotate(-135deg);
}

.slider2 .slick-next {
    right: -1.5%;
    transform: rotate(45deg);
}

/*==================================================
下から出現
==================================================*/

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
transform: translateY(100px);
  }

  to {
    opacity: 1;
transform: translateY(0);
  }
}

.fadeUp2{
animation-name:fadeUpAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
transform: translateY(120px);
  }

  to {
    opacity: 1;
transform: translateY(0);
  }
}

.fadeUp3{
animation-name:fadeUpAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
transform: translateY(140px);
  }

  to {
    opacity: 1;
transform: translateY(0);
  }
}
 
.fadeUpTrigger{
    opacity: 0;
}

/*==================================================
下から出現ここまで
==================================================*/


.btn{
width:10em;
margin: 72px auto 140px;
font-size: 2rem;
background-color:#ECECEC;
border: 3px solid #000;
border-radius: 40px;
padding: 15px;
text-align: center;
}

.ec_box{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}

.ec_btn{
font-size: 1.85rem;
z-index: 980;
background-color:#ECECEC;
border: 2px solid #222;
border-radius: 40px;
padding: 15px;
width: 14.5em;
margin: 0 auto;
}

.ec_icon{
display: inline-block;
padding: 0 12px 0 0;
line-height: 1;
margin: 0;
width: 1.6rem;
height: 1.6rem;
background-image: url("../img/shop.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat; 
}

.sticky{
position: fixed;
right: 32px;
bottom: 32px;
}

.ec_btn a,
.btn a{
text-align: center;
text-decoration: none;
color: #222;
margin: 0 auto;
display: block;
}


.about{
background-image: url("../img/about_bgsample.png");
background-repeat: no-repeat;
background-size: cover;
margin: 0 calc(50% - 50vw);
width: 100vw;
height: 100vh;
}

.about_text{
position: relative;
top: 20%;
left: 10%;
color: #fff;
width: 34vw;
}

.about h1{
width: 100%;
font-size: 2.4rem;
text-align: left;
margin-bottom: 32px;
}

.about h1 span{
color: #fff;
}

.about p{
width: 100%;
font-size: 1.8rem;
text-align: left;
text-shadow: 1px 1px 2px #808080;
}

ul.points{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

ul.points li{
text-align: center;
width: 25%;
padding: 2%;
border-radius: 2%;
}


ul.points li  figure{
display: flex;
align-content: center;
margin: 0 auto;
}

ul.points li figure img{
display: block;
margin: auto;
width: 94%;
}

ul.points li h2{
text-align: center;
font-size: 2.4rem;
padding: 30px 0;
}

ul.points li p{
font-size: 1.3rem;
}

.stage{
max-width: 300px;
margin: 0 auto;
text-align: center;
}

.videowrapp{
max-width: 80%;
margin: 0 auto;
}

.videowrapp img.stone1{
position: absolute;
left: 3%;
bottom: -10%;
width: 10vw;
}

.videowrapp img.stone2{
position: absolute;
right: 4%;
bottom: -12%;
width: 7vw;
}

img.stone3{
position: absolute;
right: 5%;
bottom: -10%;
width: 10vw;
}

.huda{
position: absolute;
bottom: -10%;
left: 23%;
width: 55vw;
}

.profile:first-child{
margin-bottom: 72px;
}

.profile_photo img.stone4{
position: absolute;
left: 10%;
bottom: -10%;
width: 5vw;
}

img.stone5{
position: absolute;
right: 2%;
bottom: 1%;
width: 7vw;
}

img.stone6{
position: absolute;
left: 1%;
bottom: -30%;
width: 9vw;
}

img.stone7{
position: absolute;
right: 4%;
top: -10%;
width: 7vw;
}

img.stone8{
position: absolute;
left: 0%;
bottom: 20%;
width: 7vw;
}


.playmovie{
position: relative;
width:100%; /* 横幅は100%で固定 */
height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
padding-top: 56.25%; /* 高さを指定(16:9) */
border:  none;
}

.playmovie iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
border:  none;
}

.products{
margin: 0 auto;
max-width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}

.products .item{
box-sizing: border-box;
width: 28%;
}
.products .item p{
font-size: 2.4em;
text-align: center;
margin-bottom: 20px;
}

.products .item img{
width: 100%;
}

.products .item_box{
margin-top: 32px;
text-align: center;
}

.products .modal-toggle{
background-color: #9a9a9a;
border: none;
border-radius: 20px;
color: #fff;
width: 150px;
height: 40px;
font-size: 1.6rem;
}

.seal_gallery{
background-image: url("../img/dodai2.png");
background-size: cover;
background-repeat: no-repeat;
width: 100vw;
padding: 10% 10% 15% 10%;
}

.seal{
width: 100%;
}

.story{
height: 55vw;
padding-bottom: 50px;
}

.story_contents{
position: absolute;
top: 5%;
right: 15%;
z-index: -1;
}

.story_contents img{
width: 7vw;
}

.story_contents2{
position: absolute;
top: 15%;
left: 2%;
z-index: -2;
}

.story_contents2 img{
width: 45vw;
}

.story_contents3{
position: absolute;
top: 55%;
right: 5%;
z-index: -3;
}

.story_contents3 img{
width: 35vw;
}

.story_contents4{
position: absolute;
top: 75%;
left: 4%;
display: flex;
flex-direction: column;
width: 32vw;
z-index: 0;
}

.story_contents4 p{
font-size: 2.4rem;
}

.story_contents4 p span{
font-size: 2.4rem;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url("../img/story_title2.png");
background-repeat: no-repeat;
background-size: contain;
background-position: left;
margin-bottom: 12px;
}

.story p{
font-size: 1.4rem;
}



#box {
width: 100px;
height: 100px;
background-color: grey;
}
#box2 {
width: 100px;
height: 100px;
background-color: grey;
}
#box3 {
width: 100px;
height: 100px;
background-color: grey;
}


.profile{
display: flex;
align-items: center;
justify-content: center;
width: 94%;
margin: 0 auto;
}

.profile_photo{
margin: 0 3%;
width: 47%;
text-align: center;
}

.profile_photo img{
width: 70%;
}

.profile_name{
width: 47%;
margin: 0 3%;
}

.profile_name h2{
margin: 0 0 20px 0;
font-size: 2.8rem;
font-weight: bold;
}

.profile_name p{
margin: 0;
font-size: 16px;
line-height: 1.8;
}

.profile_name p:first-child{
padding-bottom: 10px;
}


.hidden_container{
display: flex;
flex-direction: column;
width: 85%;
margin: 0 auto;
}


/*全体*/
.hidden_box {
padding: 0;
text-align: left;
}

/*ボタン装飾*/
.hidden_box label {
display: block;
font-size: 16px;
font-weight: bold;
border-top: solid 1px #efefef;
border-bottom: solid 1px #efefef;
cursor :pointer;
line-height: 2;
text-indent: -1em;
padding: 24px 2em;
background-color: rgba(239,239,239,0.7);
}

/*ボタンホバー時*/
.hidden_box label:hover { opacity: 0.8;
}

/*チェックは見えなくする*/
.hidden_box input {
display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 1s;
}

.hidden_box .hidden_show p{
display: block;
line-height: 2;
font-size: 16px;
text-indent: -1em;
padding: 24px 2em;
background-color: #fff;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
padding: 0;
height: auto;
transition: 1s;
opacity: 1;
}

.specification_01{
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 72px;
}

.specification_01:nth-child(even){
flex-direction: row-reverse;
}

.specification_01 figure{
width: 40%;
display: flex;
justify-content: center;
align-items: center;
}

.specification_01 figure img{
width: 300px;
}

.specification_01 ul{
font-size: 1.4rem;
width: 40%;
}

.specification_01 ul li{
display: flex;
/*justify-content: space-between;*/
border-bottom: solid 1px #000;
margin: 0 0 15px 0;
padding: 0 0 15px 15px;
}

.specification_01 ul li h4{
width: 30%;
text-align: left;
line-height: 1.8;
font-weight: bold;
}

.specification_01 ul li p{
width: 70%;
line-height: 1.8;
}



footer{
background-color:#FBFBFB;
}

.footer{
margin: 0 auto;
padding: 50px 0;
}

figure.footer_logo {
text-align: center;
padding-bottom: 32px;
}


.footer p{
font-size: 1.2rem;
text-align: center;
}

small{
font-size: 1rem;
line-height: 1;
display: block;
text-align: center;
padding: 30px 0;
}


/*=========================================
============================================
モーダルウィンドウ
==================================================
==================================================*/

.modal {
  display: none;
  position: fixed;
  z-index: 8887;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 1s ease-in-out;
}
.modal-container .img {
    margin-bottom: 15px;
    width: 90%;
}
.modal-container{
display: flex;
flex-direction: column;
justify-content: space-around;
}



.modal-container p {
    margin-bottom: 10px;
}
.modal-container p:last-child {
    margin-bottom: 0;
}
.modal-content {
    background: #FFF;
    overflow-y: auto;
    padding: 20px 25px;
    width: 85%;
    height: 80vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: show 0.6s linear 0s;
}

.modal-contnt_top{
display: flex;
flex-direction: row;
justify-content: space-around;
margin-bottom: 120px;
}

.modal-contnt_top p{
font-size: 1.4rem;
text-align: left;
}

.modal-contnt_top p span{
font-size: 1.8rem;
line-height: 1.5;
text-align: center;
color: #000;
}

.modal-contnt_box{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 30%;
}

.modal-contnt_box_two{
width: 40%;
}

.modal-contnt_box_one{
width: 65%;
}

.modal-top {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
}
.modal-close {
    color: #9a9a9a;
    text-decoration: none;
    font-size: 3rem;
    line-height: 1;
    padding: 8px;
    background-color: #EBE9E0;
    border-radius: 50%;
}
.modal-close:hover, .modal-close:focus {
  text-decoration: none;
  cursor: pointer;
}
.modal-title {
  color: #FFF;
}
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.specification_title{
text-align: center;
font-size: 2.4rem;
}

.caution p{
font-size: 2.4rem;
text-align: center;
}

.caution ol{
margin: 0 auto;
padding: 2% 10%;
max-width: 640px;
background-color: rgba(239,239,239,0.3);
border: 2px solid  #3B3B3B;
border-radius: 10px;
}

.caution ol li{
font-size: 1.4rem;
list-style-type: circle;
margin-bottom: 12px;
line-height: 1.5;
}

.caution ol li:last-child{
margin-bottom: 0;
}





/*=========================================
============================================
タブレット
==================================================
==================================================*/

@media screen and (max-width:1024px) {

header{
height: 80px;
}

header span img{
width: 150px;
}
/*

.slider{
height: 65vh;
}

.slider .slider-item{
height: 65vh;
}
*/


.container-story{
padding-bottom: 200px;
}

.story_contents4{
top: 60%;
width: 32vw;
}
/*

div.main_contents{
height: 85vh;
padding-top: 80px;
}

*/


header h1 a{
height: 50px;
}


header h1 img{
margin: 0;
}

h1{
margin-bottom: 42px;
}

/*.ec_box{
height: 40vh;
}*/

.profile_photo img.stone4{
bottom: 6%;
}

img.stone5{
bottom: 13%;
}






}

/*=========================================
============================================
タブレット2
==================================================
==================================================*/
@media screen and (max-width:820px){


.about{
height: 50vw;
}

.about_text {
position: relative;
top: 5%;
left: 2%;
width: 59vw;
border-radius: 10px;
padding: 10px;
}


.story_contents{
top: 10%;
}

.story_contents3{
top: 45%;
}

.story_contents4{
top: 75%;
width: 90%;
}
/*

div.main_contents{
height: 32vh;
}

div.main_contents figure{
height: 32vh;
}
*/

div.main_contents video{
width: 100%;
}

.ec_box{
height: 30vh;
}






}




/*==================================================
==================================================
スマートフォン
==================================================
==================================================*/

@media screen and (max-width:599px) {

div.main_contents{
padding-top: 80px;
}

.ec_box{
height: 30vh;
}


.ec_box .sticky{
position: fixed;
bottom: 10px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

.ec_btn{
font-size: 1.65rem;
}

.ec_icon{
width: 1.4rem;
height: 1.4rem;
}

div.container{
margin: 0 auto;
margin-bottom: 72px;
width: 90%;
}

div.container:first-child{
padding-top:220px;
}
/*

div.main_contents{
height: 32vh;
}

div.main_contents figure{
height: 32vh;
}
*/

div.main_contents video{
width: 100%;
}

.about_text{
top: -70%;
left: 0;
width: 85%;
color: #222;
margin: 0 auto
}

.about_text h1{
filter: invert(1);
}

h1#about{
font-size: 3rem;
margin-bottom: 24px;
}

.about{
height: 300px;
}

.about p{
font-size: 1.2rem;
text-shadow: none;
}

ul.points{
flex-direction: column;
align-items: center;
}

ul.points li{
width: 90%;
padding: 5%;
margin-bottom: 32px;
}

ul.points li figure{
width: 60vmin;
height: 60vmin;
}


.videowrapp{
max-width: 100%;
border:  none;
}

.videowrapp img{
width: 10vw;
border:  none;
}

iframe {
border:  none;
}

.products{
flex-direction: column;
max-width: 94%;
}

.products .item{
width: 94%;
text-align: center;
margin-bottom: 30px;
}

.products .item p{
font-size: 1.4rem;
margin: 0;
}

.products .item img{
width: 50%;
}


.item{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.products .item_box{
margin-top: 0;
width: 40%; 
}

.products .modal-toggle{
width: 100%;
margin-top: 12px;
font-size: 1.4rem;
}

.modal-contnt_top{
flex-direction: column;
}

.modal-content{
width: 70%;
}

.modal-contnt_box{
width: 100%;
}

.seal_gallery{
background-image: url("../img/dodai2.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100vw;
height: 170px; 
padding: 10% 5% 0% 5%;
}

.stage img{
width: 100px;
}

h1#point,
h1#asobikata,
h1#naiyoubutsu,
h1#gallery,
h1#kansyu,
h1#story,
h1#question,
h1#specification
{
font-size: 3rem;
}

.story{
height: 100vw;
}

.container-story{
padding-bottom: 250px;
}

.story_contents{
top: 2%;
right: 15%;
}



.story_contents2{
top: 4%;
right: 0;
}

.story_contents2 img{
width: 55vw;
}


.story_contents3{
top: 20%;
right: 5%;
}

.story_contents3 img{
width: 40vw;
}


.story_contents4{
top: 40%;
left: 0;
width: 96%;
}

.story_contents4 p{
font-size: 1.4rem;
}

.story_contents4 span{
margin: 0;
}

.story_contents4 span p{
background-image: url("../img/story_title2.png");
background-position: left;
}


.specification_01 ul li{
flex-direction: column;
}

.specification_01 ul li h4,
.specification_01 ul li p{
width: 100%
}


.profile{
flex-direction: column;
}


.profile_photo{
margin-bottom: 30px;
width: 96%;
}

.profile_photo img{
width: 90%
}

.profile_logo{
max-width: 200px;
max-height: 200px;
}

.profile_name{
width: 94%;
}

.profile_name h2{
font-size: 1.8rem;
}

.profile_name span p{
margin-bottom: 10px;
}


.profile_name p{
font-size: 1.4rem;
width: auto;
}

.profile_photo img.stone4{
left: 3%;
bottom: 53%;
width: 10vw;
}

img.stone5{
top: 35%;
}

img.stone6{
bottom: -10%;
}

.hidden_container{
width: 96%;
}

.specification_01{
flex-direction: column;
}

.specification_01 figure{
width: 96%;
margin-bottom: 32px;
}

.specification_01 ul{
width: 96%;
}

.specification_01:nth-child(even){
flex-direction: column;
}


.specification_01 figure img{
width: 60vw;
}

.fluid{
width: 60vw;
height: 30vh;
}

.fluid2{
width: 40vw;
height: 20vh;
}

.footer{
width: 60vw;
}

.footer img{
width: 100%; 
}

.caution ol li{
font-size: 1.2rem;
}


}