@charset “UTF-8”;

html{
    font-size: 100%;/*16px*/
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    color: #ffffff;
}

body {
    background: #050020;
    font-family: 'Noto Serif JP', serif;
}

a{
    text-decoration: none;
    color: inherit;
}

a:hover {
    opacity: .8;
    transition: 0.2s;
}

img{
    max-width: 100%;
}

li{
    list-style: none;
}

p{
    line-height: 1.6;
}

p span{
    display: inline-block;
}

h1{
    font-size:1.2rem;
}
  
h2 {
    font-size: clamp(24px, -0.625rem + 7.5vw, 2.8rem);
    text-align: center;
    margin: 0 0 .3em 0;
    letter-spacing: .15em;
    line-height: 1.1;
}

.eachTextAnime span {
    font-size: clamp(24px, -0.625rem + 7.5vw, 2.8rem);
    text-align: center;
    margin: 0 0 5px 0;
    letter-spacing: .15em;
    line-height: 1.1;
}

span.sub_title
/*h2 span*/{
    font-size: clamp(0.813rem, 0.653rem + 0.8vw, 1.25rem)/*view min320px,max2120px 13px-20px*/;
    letter-spacing: .1em;
    display: block;
    text-align: center;
}

h3{
    font-size:clamp(1.25rem, 1.116rem + 0.57vw, 1.875rem)/*view min375px,max2120px 16px-24px*/;
    text-align: center;
    margin: 0 0 30px 0;
    font-weight: bold;
}

h3 span{
    font-size: clamp(13px, 3vw, 1.9rem);
    letter-spacing: .1em;
}

h4{
    margin-top: 50px;
    border-bottom: 2px solid #ffffff;
}
  
small{
    display: block;
    text-align: center;
    font-size: 0.8rem;
}

dt{
    font-weight: 700;
}

svg,img,embed,object,iframe {
    vertical-align: bottom;
}

@media(min-width:600px) {
	.sp_br{
		display: none;
	}
}

@media(min-width:780px) {
	.sp_br780{
		display: none;
	}
}

@media(min-width:900px) {
	.sp_br900{
		display: none;
	}
}

@media(min-width:1080px) {
	.sp_br1080{
		display: none;
	}
}

@media(min-width:1200px) {
	.sp_br1200{
		display: none;
	}
}

@media(min-width:1300px) {
	.sp_br1300{
		display: none;
	}
}

@media(max-width:320px) {
	.pc_br320{
		display: none;
	}
}

@media(max-width:1080px) {
	.pc_br1080{
		display: none;
	}
}
  
/*========= header ===============*/

#header{
    width:100%;
    color:#fff;
    text-align: center;
    height: 90px;
    position: fixed;
    z-index: 9999;
  }

header .menu_box {
    height: 90px;
    margin: 0 100px 0 calc(10vw - 20px);
    display: flex;
    align-items: center;
    justify-content: center;
}

header .logo{
    width: 40.54vw;
    z-index: 9999;
}

header .right_box,
.language_box,
.social_box{
    display: flex;
    align-items: baseline;
}

header .right_box{
    z-index: 9999;
    display: none;
}

.language_box{
    font-weight: 700;
    margin: 0 20px;
  font-size: 18px;
}

.social_box li,
.language_box li{
    margin: 0 5px;
}

.language_box li{
    letter-spacing: 0.15em;
    font-family: "aria-text-g2", sans-serif;
    font-weight: 400;
    font-style: normal;
}

ul.social_box img{
    width: 25px;
    height: 25px;
  }

@media screen and (min-width: 600px) {
    #header{
        padding: 0 20px;
    }

    header .menu_box {
        justify-content: space-between;
        margin: 0 100px 0 calc(10vw - 20px);
    }
    
    header .logo{
        width: clamp(200px, 11.32vw, 300px);
    }

    header .right_box{
        display: flex;
    }
}
  
/*========= main-visual ===============*/
#main{
    position: relative;
}

.main-visual-box .topitem_logo{
    position: absolute;
    top: calc(.1vw + 90px);
    text-align: center;
    place-items: center;
    left: 0;
    right: 0;
    margin: auto;
}

.main-visual-box .topitem_logo img{
    width: 90vw;
    margin: 0 auto;
}

.topitem-box{
    display: flex;
    margin:0px 10%;
    padding-top: calc(90vw / 4.11 + 85px);
    justify-content: center; 
    position: relative;
    z-index: 1000;
} 

.topitem img{
    width: auto;
    margin: 0 auto;
    height: 85vw;
}

.topitem_title{
    display: grid;
    align-content: flex-end;
    padding-bottom: 5%;
}

.topitem_title img{
    width: calc(clamp(1.75rem, 1.172rem + 2.89vw, 5rem)* 6.5);
    max-width: 100%;
    margin-bottom: 1rem;
    margin-left: 10%;
 }

.topitem_title h3.item_title{
    display:grid;
    place-content: flex-end;
    font-size: clamp(1.75rem, 1.172rem + 2.89vw, 5rem);/*view min320px,max2120px 28px-80px*/
    margin-bottom: 0;
}

.topitem_title span{
   font-size: clamp(0.625rem, 0.469rem + 0.78vw, 1.5rem);/*view min320px,max2120px 10px-24px*/
   padding: .9rem 0;
}

.topitem p{
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    margin-top: 1rem;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    font-family: "Averia Serif Libre";
}

small.top_item_attention{
    margin: 0 15%;
    text-align: right;
}

.toplead-box{
    margin: 0;
    position: relative;
    z-index: 1000;
}

.toplead-box img{
    width: 50%;
    margin: 1em auto 2em;
    display: block;
}

.toplead/*ja*/,
.toplead_en/*en*/{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    place-items: center;
    margin: auto;
}

h2.toplead{
    margin-top: 30px;
    margin-bottom: 60px;
}

h2.toplead span{
   /* font-size: clamp(0.813rem, 0.316rem + 2.12vw, 3.125rem);/*view min375px,max2120px 13px-100px*/
    /*  font-size: clamp(0.813rem, 0.646rem + 0.83vw, 1.75rem);view min320px,max2120px 13px-28px*/
    font-size: clamp(0.813rem, 0.554rem + 1.29vw, 2.25rem);/*view min320px,max2120px 13px-36px*/
    letter-spacing: .2rem;
    line-height: 2;
}

h2.toplead span.toplead_second{
    display: block;
}

h2.toplead span.toplead_third{
    display: block;
    margin-bottom: 20px;
    padding-left: .8rem;
}

h2.toplead span.toplead_third span{
  /*  font-size: clamp(1.2rem, 4.716vw, 3.6rem);*/
    /*font-size: clamp(1.5rem, 1.118rem + 1.91vw, 3.625rem);view min320px,max2120px 24px-58px*/
    font-size: calc(90vw / 14.2);
    line-height: 1.5;
    letter-spacing: .6em;
}

.toplead_en h2 span.toplead_first{
    line-height: 1.8;
}

.toplead_en h2 span.toplead_first span,
.toplead_en h2 span.toplead_third span{
    font-size: clamp(0.813rem, 0.653rem + 0.8vw, 1.25rem);/*view min320px,max2120px 13px-20px*/
}

.toplead-box small{
    text-align: right;
}

.main-visual-img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 375px) {
    .topitem_title img{
        margin-left: 18%;
    }

    .toplead-box img{
        width: 40%;
        margin: 2em auto 3em;
    }
}

@media (min-width: 500px) {
    h2.toplead span{
        letter-spacing: .5rem;
    }

    h2.toplead span.toplead_third span{
        letter-spacing: 1.2rem;
    }

    .toplead-box img{
        margin: 5em auto 2em;
    }
}

@media (min-width: 600px) {
    .main-visual-box .topitem_logo img{
        width: 60vw;
    }

    .topitem-box{
        padding-top: calc(60vw / 4.11 +  85px);
    } 

    .topitem{
        width: 40%;
        text-align: right;
        padding-right: 1%;
    }

    .topitem img{
        width: auto;
        margin: 0 auto;
        height: 45vw;
     /*   max-width: 40%;*/
    }

    .topitem_title{
        width: 58%;
        padding-left: 5%;
    }

    .topitem_title img{
        margin-left: 0;
    }

    .topitem_title{
        width: 42vw;
    }

    .topitem_title h3.item_title {
        justify-content: start;
    }

    .toplead-box img{
        width: 30%;
        margin: 3em auto 6em;
    }
}

@media (min-width: 900px) {
    .main-visual-box .topitem_logo{
        display: block;
        position: absolute;
        padding-top: calc(24.29% - 120px);
        text-align: center;
        place-content: center;
        place-items: center;
        top:0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .topitem-box{
        padding-top: calc(60vw / 4.11 +  23% - 120px);
    } 

    h2.toplead{
        margin-bottom: 200px;
    }

    h2.toplead span.toplead_third span{
        font-size: clamp(1.2rem, 4.716vw, 3.6rem);
         /* font-size: clamp(1.5rem, 1.118rem + 1.91vw, 3.625rem);/*view min320px,max2120px 24px-58px*/
         letter-spacing: 2rem;
    }

    h2.toplead_en{
        margin-bottom: 1rem;
    }

    .toplead-box img{
        width: 23%;
        margin: 8em auto 6em;
    }

}

/*========= ナビゲーションのためのCSS ===============*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 2000;
    /*ナビのスタート位置と形状*/
	top:0%;
    right:-120%;
	width:100%;
    height: 80vh;/*ナビの高さ*/
	background:#050020;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 2000; 
    width: 100%;
    height: 80vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
/*#g-nav ul*/.g-nav-inner {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 2000;
    top: calc(50% + 60px);
    left: 50%;
    transform: translate(-50%,-50%);
    width: max-content;
}

#g-nav .social_box,
#g-nav .language_box{
    align-items: baseline;
    justify-content: center;
}

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

#g-nav .social_box{
    margin-top: 50px;
}

#g-nav .language_box {
    margin-top: 5px;
}

#g-nav li a{
	color: #ffffff;
	padding: 10.5px 0;
	display: block;
	letter-spacing: 0.1em;	
    font-size: clamp(1rem, 0.893rem + 0.46vw, 1.5rem);/*view min375px,max2120px 16px-24px*/
    line-height: 1.4;
}

#g-nav li.insta a{
    padding-right: 15px;
}

#g-nav .language_box a{
    font-size: 18px;
    letter-spacing: .3rem;
}

#g-nav .social_box img {
    width: 35px;
    height: 35px;
}

/*ナビゲーションオープン背景透過*/
.close_back {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.6);
	z-index: 10;
	transition: all 400ms cubic-bezier(0.29, 0.63, 0.44, 1);
}

.close_back.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media(min-width: 600px){
    #g-nav{
        height: 70vh;
    }

    #g-nav.panelactive #g-nav-list{
        height: 70vh;/*表示する高さ*/
    }

    .g-nav-inner {
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 2000;
        left: 10%;
        transform: translate(0, -50%);
    }
    #g-nav .social_box,
    #g-nav .language_box{
        display: none;
    }

    #g-nav li{
        text-align: left;
    }
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top: 20px;
	right: 30px;
	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: #ffffff;
  	width: 60%;
  }

.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: 60%;
}

.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: 60%;
}

 /*========= section h2_wind ===============*/
 
 .wind_inner,
 .wind_inner_en{
    position: relative;
}

.wind_inner picture,
.wind_inner_en picture{
    width: 100%;
}

.wind_inner_content{
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    line-height: 2.75;
}

.wind h2,
section.wind p{
    writing-mode: vertical-rl;
    text-align: start;
 }

 .wind h2{
    margin: 0 0 0 1.5rem;
    font-size: clamp(1.5rem, 1.298rem + 1.01vw, 2.625rem);/*view min320px,max2120px 24px-42px*/
 }

 .wind p{
   /* font-size: clamp(0.813rem, 0.544rem + 1.15vw, 2.063rem);/*view min320px,max2120px 13px-33px*/
   font-size: clamp(0.75rem, 0.638rem + 0.56vw, 1.375rem);/*view min320px,max2120px 12px-22px*/
   line-height: 2.75;
 }

 .wind_inner_content_en{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    display: grid;
    place-content: center;
    place-items: center;
 }

 .wind_inner_content_en h2{
    font-size: clamp(24px, -0.625rem + 7.5vw, 2.8rem);
    margin: 0 0 1.5em 0;
 }

 .wind_inner_content_en h2,
 .wind_inner_content_en p.box_fadeUpTrigger{
    writing-mode: horizontal-tb;
    text-align: center;
 }

 .wind_inner span{
     /* font-size: clamp(2.125rem, 1.273rem + 3.64vw, 4rem);view min370px,max2120px 34px-64px*/
     font-size: clamp(1.875rem, 1.538rem + 1.69vw, 3.75rem);/*view min320px,max2120px 30px-60px*/
 }

 /*.wind_inner_content_en span{
    font-size: clamp(24px, -0.625rem + 7.5vw, 2.8rem);
 }*/

 @media(min-width: 375px){
    .wind h2{
        margin: 0 0 0 2em;
    }

    .wind_inner_content_en h2{
        margin: 0 0 2em 0;
     }
 }

/*========= section h3_about ===============*/
section.about{
    position: relative;
 }

.about_inner picture{
    width: 100%;
}

.about_inner_content,
.about_inner_content_en{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    display: grid;
    place-content: center;
    place-items: center;
}

.about_inner_content span.sub_title,
.about_inner_content_en h2{
    margin-bottom: 40px;
}

.about_inner_content p,
.about_inner_content_en p{
    font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
    line-height: 1.4;
    text-align: center;
    padding: 0 3%;
}

@media(min-width: 375px){
    .about_inner_content p,
    .about_inner_content_en p{
        line-height: 1.75;   
    }
}

@media(min-width: 780px){
   section.about {
        margin-bottom: 0;
    }
    .about_inner_content p,
    .about_inner_content_en{
        line-height: 2;
    }
    .about_inner_content span.sub_title,
    .about_inner_content_en h2{
        margin-bottom: 100px;
    }
}

@media(min-width: 1080px){
    .about_inner_content_en p{
        padding: 0;
    }
}

/*========= section h4_new_make ===============*/
section.new_make{
    background-color: #ffffff;  
    padding-bottom: 70px;
 }

.new_make_inner,
.new_make_inner_en{
    margin: 0 4.26%;
    line-height: 1.75;
    color: #040621;
    padding: 8.6% 0;
    text-align: center;
}

.new_make_inner span.sub_title,
.new_make_inner_en h2{
    margin-bottom: 30px;
}

.new_make_flexleft{
    width: 80%;
    margin: 0 auto 40px;
}

.new_make_flexright p,
.new_make_flexright_en p{
    font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
}

@media(min-width: 900px){
    .new_make_inner span.sub_title,
    .new_make_inner_en h2{
        margin-bottom: 68px;
    }

    .new_make_flexbox{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .new_make_flexleft{
        flex-basis: 50%;
        margin-right: 5%;
        margin-bottom: 0;
    }

    .new_make_flexright,
    .new_make_flexright_en{
        flex-basis: 50%;
    }

    .new_make_flexright p{
        width: max-content;
    }

    .new_make_flexright_en p{
        width: 100%;
    }
}

@media(min-width: 1100px){
    .new_make_inner,
    .new_make_inner_en{
        padding: 8.6% 6.6%;
    }
}

/*========= section h5_barreles ===============*/

.barrels_inner,
.barrels_inner_en{
    margin: 15% 0 13% 0%;
    line-height: 1.75;
}

.barrels_inner span.sub_title,
.barrels_inner_en h2{
    margin-bottom: 3rem;
}

.barrels_flexleft{
    text-align: center;
    padding-bottom: 73px;
    margin:0 3%;
}

.barrels_flexleft p,
.barrels_flexright p{
    font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
}

.barrels_flexleft p{
    line-height: 1.66;
}

.barrels_type{
    margin: 3%;
}

@media(min-width: 800px){
    .barrels_inner,
    .barrels_inner_en{
        margin: 7.5% 0 13% 0%;
    }

    .barrels_inner span.sub_title,
    .barrels_inner_en h2{
        margin-bottom: 5.5rem;
    }

    .barrels_flexbox{
        display: flex;
        justify-content: space-between;
    }

    .barrels_flexleft{
        width: 50%;
        padding-bottom: 0;
        line-height: 2;
        margin:0 4.26%;
    }

    .barrels_flexright{
        width: 50%;
    }

    .barrels_type{
        padding-right: 8.33%;
        margin: 0;
    }

    .barrels_type p{
        text-indent: -5rem;
        padding-left: 5rem;
        line-height: 1.66;
    }

    .barrels_type h4{
        margin: 72px 0 1rem;
        border-bottom: 1px solid #ffffff;
    }
}

/*========= section h6_scotland ===============*/
section.scotland,
section.scotland_en{
    background-color: #ffffff;
    color: #040621;
}

.scotland h2,
.scotland_en h2{
    padding-top: 35px;
    line-height: 1.3;
}

.scotland span.sub_title,
.scotland_en h2{
    padding-bottom:  50px;
    line-height: 1.3;
}

.scotland_inner{
    position: relative;
    font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
}

.scotland_inner_right_en p,
.scotland_en .scotland_inner .scotland_inner_left p{
    font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
}

.scotland_inner picture{
    width: 100%;
}

.scotland_inner_right{
 /*   margin: 0 4.26%;*/
    line-height: 1.8;
    top: 0;
    padding: 7% 0;
}

.scotland_bg{
    background-image: url("../img/h6_scotland_bg_sp.png");
    background-position: center;
    background-size: contain;
    padding-top: 55.72%;
    padding-bottom: 25%;
    height: 0;
    width: 50%;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.scotland_inner_right p,
.scotland_inner_right_en p{
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
}

.scotland_inner_right p,
.scotland_inner_right_en p{
    padding-top: calc(61.88% - 280px);
}

.scotland img,
.scotland_en img{
    padding-bottom: 7%;
}

.scotland_inner_left{
    padding: 0 4.26% 5rem;
}

.scotland_inner_left p{
    text-align: center;
    line-height: 1.8;
    width: 100%;
  /*  padding: 0 4.26% 20%;*/
}

@media (min-width: 900px){
    .scotland_inner_right p,
    .scotland_inner_right_en p{
        padding-top: calc(55.72% - 400px);
    }
}

@media (min-width: 900px) and (max-width: 1160px){
br.mid_none_br{
    display: none;
    }
}

@media (min-width: 1200px){
    .scotland h2,
    .scotland_en h2{
        padding-top: 5rem ;
    }

    .scotland span.sub_title,
    .scotland_en h2{
        padding-bottom: 130px;
    }

    .scotland_bg{
        background-image: url("../img/h6_scotland_bg.png");
        width: 100%;
        padding-top: 85.72%;
        padding-bottom: 0;
        height: 0;
    }

    .scotland_inner_right,
    .scotland_inner_right_en p{
        position: static;
    }

    .scotland_inner_right p{
        position: absolute;
        top: 6%;
        left: 32%;
        width: 90%;
        padding-top: 0;
    }

    .scotland_inner_right_en p{
        position: absolute;
        top: 6%;
        left: 53%;
        width: 45%;
        padding-top: 0;
    }

    .sp_img{
        display: none;
    }

    .scotland_inner_left{
        position: absolute;
        top: 45%;
        width: 40%;
        padding: 0 4.26%;
    }
}

/*========= section h7_twowaters ===============*/

.twowaters_inner{
    position: relative;
}

.twowaters h2{
    line-height: 1.3;
}

.twowaters_inner span.sub_title,
.twowaters_inner_content_en h2{
    margin-bottom: 70px;
}

.twowaters_inner picture{
    width: 100%;
}

.twowaters_inner_content,
.twowaters_inner_content_en{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    display: grid;
    place-content: center;
    place-items: center;
    line-height: 2.75;
}

.twowaters_inner_content p,
.twowaters_inner_content_en p{
    font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
    margin: 0 3%;
    line-height: 1.75;
    text-align: center;
    letter-spacing: 0.1em;
}

@media(min-width: 780px){
 
    .twowaters_inner{
        line-height: 2;
    }
    .twowaters h2{
        line-height: 1.1;
    }

    .twowaters_inner span.sub_title,
    .twowaters_inner_content_en h2{
        margin-bottom: 100px;
    }

    .twowaters_inner_content p{
        margin: 0;
    }
}

/*========= section h7_treasure_water ===============*/
.treasure_water_inner{
    position: relative;
}

.treasure_water_inner picture{
    width: 100%;
}

.treasure_water_inner_content,
.treasure_water_inner_content_en{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    display: grid;
    place-content: center;
    place-items: center;
    line-height: 2.75;
}

.treasure_water_inner_content span.sub_title,
.treasure_water_inner_content_en h2{
    padding-bottom: 40px;
}

.treasure_water_inner_content p,
.treasure_water_inner_content_en p{
    font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
    margin: 0 3%;
    line-height: 1.75;
    text-align: center;
    letter-spacing: 0.1em;
}

@media(min-width: 780px){
    .treasure_water_inner{
        line-height: 2;
    }

    .treasure_water_inner_content span.sub_title,
    .treasure_water_inner_content_en h2{
        padding-bottom: 120px;
    }

    .twowaters_inner_content p,
    .treasure_water_inner_content p{
        margin: 0;
    }

    .twowaters_inner_content_en p,
    .treasure_water_inner_content_en p{
        margin: 0 15%;
    }
}

/*========= section h8_world ===============*/
.world_flexbox{
    display: flex;
    flex-direction: column-reverse;
}

.world_inner,
.world_inner_en{
    line-height: 1.75;
    margin: 15% 0 18% 0%;
}

.world_inner span.sub_title{
    padding-bottom: 40px;
}

.world_inner_en h2{
    padding-bottom: 60px;
}

.world_flexleft{
    text-align: center;
    margin: 60px 3% 10px;
}

.world_flexleft p{
    font-size: clamp(0.875rem, 0.763rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
    line-height: 1.75;
}

.world_inner_en p{
    font-size: clamp(0.875rem, 0.763rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
}

@media(min-width: 900px){
    .world_inner,
    .world_inner_en{
        margin: 7.5% 0 9% 0;
    }

    .world_inner span.sub_title,
    .world_inner_en h2{
        padding-bottom: 80px;
    }

    .world_flexbox{
        flex-direction: row;
        justify-content: space-between;
    }

    .world_flexleft{
        display: flex;
        width: 50%;
        padding-bottom: 0;
        line-height: 2;
        justify-content: center;
        align-items: center;
        margin:0 4.26% 0 4.26%;
    }

    .world_flexleft p{
        display: inline-block;
        font-size: clamp(0.875rem, 0.763rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
        line-height: 2;
    }

    .world_flexright{
        width: 50%;
        display: flex;
        align-items: center;
    }
}

/*========= section h9_poursdown ===============*/

 section.poursdown{
    position: relative;
}

.poursdown_inner picture{
    width: 100%;
}

.poursdown_inner_content,
.poursdown_inner_content_en{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    display: grid;
    place-content: center;
    place-items: center;
    line-height: 2.75;
}

.poursdown_inner_content p,
.poursdown_inner_content_en p{
    font-size: clamp(0.875rem, 0.763rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
    margin: 0 3%;
    line-height: 1.75;
    text-align: center;
    letter-spacing: 0.1em;
}

.poursdown span.sub_title,
.poursdown_inner_content_en h2{
    margin-bottom: 11.33%;
}

@media(min-width: 375px){
    .poursdown span.sub_title,
    .poursdown_inner_content_en h2{
        margin-bottom: 21.33%;
    }
}

@media(min-width: 780px){
   
   section.poursdown {
        margin-bottom: 0;
    }
    .poursdown_inner{
        line-height: 2;
    }

    .poursdown span.sub_title,
    .poursdown_inner_content_en h2{
        margin-bottom: 6.6%;
    }

    .poursdown_inner_content p{
        margin: 0;
    }
}

/*========= section h10_product===============*/
.product_ttl{
    position: relative;
    margin-bottom: 10%;
}

.product_ttl img{
    width: 30vw;
    margin: 2em auto;
    display: block;
}

.product_inner h2,
.product_inner span.sub_title{
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    place-items: center;
    margin: auto;
}

.product span.sub_title{
    top: calc(50% + 4em);
}

.product h2{
    font-size: clamp(28px, -0.625rem + 7.5vw, 4.2rem);
}

.product_inner{
    line-height: 1.75;
    margin: 0 0 18% 0;
}

.product_flexleft{
    text-align: center;
    margin-bottom: 50px;
}

.product_flexleft img{
    max-height: 450px;
}

.product_flexright p{
    letter-spacing: 0.1em;
}

h3.item_title{
    font-size: clamp(1.75rem, 1.528rem + 1.11vw, 3rem);/*view min320px,max2120px 28px-48px*/
    letter-spacing: 0.05em;
    margin-top: 1rem;
    text-align: center;
    line-height: 1.1;
    font-family: "Averia Serif Libre";
    text-align: left;
}

h3.item_title span{
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(0.813rem, 0.653rem + 0.8vw, 1.25rem);/*view min320px,max2120px 13px-20px*/
    letter-spacing: .1em;
    display: block;
    font-weight: 200;
    padding-top: 5px;
}

.purchase_button .button{
    display: block;
    position: relative;	
    width: 160px;	
    padding: 0.3em;	
    text-align: center;	
    text-decoration: none;	
    border: 1px solid #ffffff;
    margin: 0 auto;
}

.product_right_inner{
    margin: 0 3%;
}

.product_right_inner p{
    font-size:  clamp(1rem, 0.893rem + 0.46vw, 1.5rem);/*view min375px,max2120px 16px-24px*/
}

.product_right_inner .purchase_button a{
    font-size: 1.5rem;
}

.product_right_inner p.discription{
    margin-bottom: 1.8em;
}

.discription_flaverbox{
    margin: 1.8em 0 50px 0;
}

.discription_flaverbox div{
    display: flex;
}

p.flaver_left{
    width: 30%;
}

p.flaver_right{
    width: 70%;
}

.product_right_inner small{
    display: none;
}	

@media(min-width: 480px){
    .product_ttl img{
        width: 20vw;
    }

    .product_inner{
        margin-bottom: 9%;
    }
}

@media(min-width: 780px){
    .product_flexbox{
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
    }

    .product_flexleft{
        display: flex;
        width: 30%;
        padding-bottom: 0;
        justify-content: right;
        align-items: center;
        margin:0 4.26% 0 4.26%;
    }

    .product_flexleft img{
        max-height: 600px;
    }

    .product_flexleft p{
        display: none;
    }

    .product_flexright{
        width: 65%;
        display: flex;
        margin-right: 10%;
    }

    h3.item_title{
        font-size: 2.2rem;
    }

    .purchase_button{
        margin-bottom: 15px;
    }

    .purchase_button .button{
        margin-left: 0;
        width: 120px;
    }

    .product_right_inner .purchase_button a{
        font-size:  clamp(1rem, 0.893rem + 0.46vw, 1.5rem);/*view min375px,max2120px 16px-24px*/
    }

    .product_right_inner small{
        display: block;
        text-align: left;
        letter-spacing: normal;
    }
}

/*========= section h11_aids ===============*/
 .aids_inner{
    position: relative;
}

.aids_inner picture{
    width: 100%;
}

.aids_inner_content,
.aids_inner_content_en{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    display: grid;
    place-content: center;
    place-items: center;
    line-height: 1.75;
}

.aids_inner_content p,
.aids_inner_content_en p{
    font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
    margin: 0 3%;
    line-height: 1.75;
    text-align: center;
}

.aids_logo{
    width: 50vw;
    margin: 0 auto 35px;
}

.aids h2{
    font-size:clamp(24px, -0.625rem + 7.5vw, 2rem);
   /* width: max-content;*/
    margin-bottom: 45px;
    line-height: 1.5;
}

.aids_bg_text img{
    position: absolute;
    margin: auto;
    bottom: 0;
    width: 90%;
    left: 0;
    display: grid;
    right: 0;
    place-items: center;
    place-content: center;
}

@media(min-width: 780px){
   section.aids {
        margin-bottom: 0;
    }
    .aids_inner{
        line-height: 2;
    }

    .aids_logo{
        width: 35%;
        margin: 0 auto 80px;
    }

    .aids h2{
        margin-bottom: 50px;
    }

    .aids_bg_text{
        width: 90%;
    }
}

@media(min-width: 900px){
    .aids_inner_content p{
        margin:0;
    }

    .aids_inner_content_en p{
        margin:0 15%;
    }

}

/*========= company_profile ===============*/
.company_profile_bg{
    position: relative;
}

.company_profile_bg picture{
    width: 100%;
}

.company_profile_bg .h2_box{
    position: absolute;
    line-height: 1.2;
    top: calc(50% + 45px);
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    color: #ffffff;
    width: max-content;
}

.company_profile_bg span.sub_title{
    color: #ffffff;
    position: absolute;
    font-size: clamp(0.813rem, 0.653rem + 0.8vw, 1.25rem) /*view min320px,max2120px 13px-20px*/;
    letter-spacing: .1em;
    width: 100%;
}

.company_profile_inner{
    padding: 40px 0 50px 0;
    background-color: #ffffff;
}

table.tbl-overview{
    width: 100%;
}

.tbl-overview tbody,
.tbl-overview tr,
.tbl-overview th,
.tbl-overview td{
    display: block;
    width: 100%;
}

.tbl-overview th{
    background-color: #52697e;
    padding: 10px;
    text-align: left;
    box-sizing: border-box;
}

.tbl-overview td{
    margin-bottom: 10px;
    padding: 10px;
    color: #000000;
}

@media(min-width: 700px){
    .company_profile_inner{
        padding: 150px 0 200px 0;
    }

    table.tbl-overview{
        display: table;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .tbl-overview tr {
        display: table-row;
        width: auto;
    }

    .tbl-overview th {
        display: table-cell;
        width: 200px;
        padding: 15px;
    }

    th.border_pc{
        border-bottom: 1px solid #ffffff;
    }

    .tbl-overview td:nth-child(9) {
        border-bottom: none;
    }

    .tbl-overview td{
        display: table-cell;
        width: calc(100% - 200px);
        padding: 15px;
        border-bottom: 1px solid #000000;
    }
}

/*========= privacy ===============*/
#privacy{
    position: relative;
    background-color: #ffffff;
    color:#000000;
    line-height: 1.3;
 }

 .privacy_bg{
    position: relative;
}

.privacy_bg picture{
    width: 100%;
}

/*.privacy_h2*/.privacy_bg .h2_box{
    position: absolute;
    line-height: 1.2;
    top: calc(50% + 45px);
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    color: #ffffff;
    width: max-content;
}

.privacy_bg span.sub_title{
    color: #ffffff;
    position: absolute;
    font-size: clamp(0.813rem, 0.653rem + 0.8vw, 1.25rem) /*view min320px,max2120px 13px-20px*/;
    letter-spacing: .1em;
    width: 100%;
}

.privacy_inner{
    padding: 2rem 4.24%;
}

.privacy_inner dt{
    margin: 40px 0 10px;
    border-bottom: 1px solid #000000;
    font-size: clamp(0.813rem, 0.664rem + 0.64vw, 1.5rem);
    line-height: 1.6;
}

@media(min-width: 700px){
    .privacy_inner{
        padding: 100px 4.24% 150px ;
    }
}

/*========= contact ===============*/
#contact{
    background-color:#ffffff;
}

.form-control{
    padding: 8px;
    margin-bottom: 10px;
}

.contact_inner{
    color: #040621;
}

.contact_inner dl input{
    width: 100%;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 5px;
    background: #fff;
    color: #555;
}

/*.contact_inner dl input:hover{
    opacity: .8;
    transition: 0.2s;
}*/

.contact_inner dl textarea{
    width: 100%;
    max-width: 100%;
    height: 200px;
    max-height: 200px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    background: #fff;
    color: #555;
}

.contact_inner dt{
    margin-top: 10px;
}

.contact_inner dd{
    margin-top: 10px;
}

.contact_confirm .contact_inner dd{
    margin-bottom: 4rem;
}

  /*========= footer ===============*/
  footer #pageTop {
    position: absolute;
    right: 20px;
    top: -60px;
    color: #000000;
    font-size: .9rem;
  }

  footer #pageTop a {
    text-align: center;
    display: block;
}

  #footer{
    background:#050020;
    color: #ffffff;
    line-height: 140%;
    position: relative;
    margin-bottom: 70px;
}

footer .news_bg {
    background-image: url(../img/mail_magazine_sp.jpg);
    height: 500px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    justify-items: center;
    align-items: center;
}

footer .news_inner {
    max-width: 1200px;
    margin: 0 3%;
}

footer .news_inner h3 {
    font-size: 2.2rem;
    text-align: center;
    margin-top: 50px;
    position: relative;
    margin-bottom: 60px;
    font-weight: 400;
    letter-spacing: 0.1em;
}

footer .news_inner h3:after {
    content: '';
    position: absolute;
    bottom: -24px;
    display: inline-block;
    width: 24%;
    height: 1.5px;
    left: 50%;
    background-color: #ffffff;
    transform: translateX(-50%);
}

footer .news_inner p{
    text-align: center;
    font-size:clamp(0.875rem, 0.763rem + 0.56vw, 1.5rem);/*view min320px,max2120px 14px-24px*/
}

.mailMagazineSubscribe_field{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer #mail_form{
    background-color: transparent;
    border: none;
    box-shadow: none;
    font-family: Meiryo;
}

/*footer form#mail_form input[type="button"]{
    border-radius: 0;
    border: none;
    background: #424242;
    height: 28px;
    margin-left: 0;
}*/

footer form#mail_form input[type="button"]:hover{
    background: #343434;
}

.footer_box{
    margin: 90px 4.26% 40px;
    text-align: center;
}

.footer_logo{
    width: clamp(200px, 17.45vw, 360px);
    margin: 0 auto 3rem;
}

footer .social_box{
    display: flex;
    justify-content: center;
    margin: 70px 0 10px 0;
    font-family: "a-otf-ryumin-pr6n", serif;
    font-weight: 300;
    font-style: normal;
}

.notice_box{
    text-align: center;
    font-size: 1.2rem;
    line-height: 2;
}

footer .notice_en ul li{ 
    display: block;
}

footer .notice_en ul li.block-on-small-screen{
    line-height: 1.2;
    margin-top: 0.5rem;
}

@media (min-width: 600px){
    #footer{
        margin-bottom: 120px;
    }

    footer .news_bg {
        background-image: url(../img/mail_magazine.jpg);
    }

    .footer_box{
        margin: 100px 4.26% 30px;
    }

    footer .notice_box{
        display: flex;
        flex-direction: column-reverse;
        font-size: .9rem;
    }

    footer .social_box{
        margin: 20px 0;
    }

    footer .notice ul{
        display: flex;
        justify-content: space-between;
        max-width: 650px;
        margin: 0 auto;
    }

    footer .notice_en ul{
        display: inline-block;
        max-width: 650px;
        margin: 0 auto;
    }

    footer .notice_en ul li{ 
        display: inline-block;
        padding: 5px 15px;
    }

    footer .notice_en ul li.block-on-small-screen{
        display: block;
        line-height: 2;
        margin-top: 0;
    }
}

/*========= titlefadeUp =========*/
.eachTextAnime span,
span.eachTextAnime span,
h2.eachTextAnime span{
    opacity: 0;
}

.eachTextAnime.appeartext span,
span.eachTextAnime.appeartext,
h2.eachTextAnime span.appeartext span{ 
    animation:text_anime_on 1s ease-out forwards; 

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

/*========= textfadeUp =========*/


/*要素を下から表示  p,img tag 用*/
.fadeUp{
    animation-name:fadeUpAnime;
    animation-fill-mode:forwards;
    animation-duration:1.5s;
    transition: all 1500ms cubic-bezier(0.29, 0.63, 0.44, 1);
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      0%{
      opacity: 0;
      transform: translateY(50px);
      }

      100% {
      opacity: 1;
      transform: translateY(0);
      }
    }
   
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .box_fadeUpTrigger{
        opacity: 0;
    }

/*要素を下から表示 top_title 用*/
.fadeUpTop{
    animation-name:fadeUpAnimeTop;
    animation-fill-mode:forwards;
    animation-duration:1.5s;
    transition: all 1500ms cubic-bezier(0.29, 0.63, 0.44, 1);
    opacity:0;
    }
    
    @keyframes fadeUpAnimeTop{
      0%{
      opacity: 0;
      transform: translateY(50px);
      }

      100% {
      opacity: 1;
      transform: translateY(0);
      }
    }
   
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .top_fadeUpTrigger{
        opacity: 0;
    }


/*要素を下から表示 span　tag　用*/
.fadeUpSpan{
    animation-name:fadeUpAnimeSpan;
    animation-fill-mode:forwards;
    animation-duration:1.5s;
    animation-delay: .5s;
    opacity:0;
    }
    
    @keyframes fadeUpAnimeSpan{
      0%{
      opacity: 0;
      transform: translateY(50px);
      }

      100% {
      opacity: 1;
      transform: translateY(0);
      }
    }
   
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .span_fadeUpTrigger{
        opacity: 0;
    }


    /*要素を下から表示 span　tag　用*/
.fadeUpSpanTop{
    animation-name:fadeUpAnimeSpanTop;
    animation-fill-mode:forwards;
    animation-duration:1.5s;
    animation-delay: .5s;
    opacity:0;
    }
    
    @keyframes fadeUpAnimeSpanTop{
      0%{
      opacity: 0;
      transform: translateY(50px);
      }

      100% {
      opacity: 1;
      transform: translateY(0);
      }
    }
   
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .spantop_fadeUpTrigger{
        opacity: 0;
    }