@charset "utf-8";

/* common ---------------- */
#header + #contents{ padding-top:5em; }
.page_nav{ margin-bottom:1.5em; }
.side, .recipe_main{ width:100%; }

/* title */
.b_sub{ position:relative; padding-left:1em; font-size:1.2em; }
.b_sub::before{ position:absolute; content:""; width:4px; height:90%; left:0; top:calc(50% - 45%);
  background:#c2c2c2; }
.c_title{ display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center;
  width:180px; height:180px;
  margin:0 auto 1em; padding:2em; text-align:center; background:#FFF; border-radius:50%; }
.c_title .en_title{ display: block; margin:0 auto; line-height:0.7; }
.t_frame{ position:relative; margin:0 auto 1em; padding:2em 0 0.2em; text-align: center;
  font-size:1.3em; letter-spacing:0.05em; color:#401610; }
.t_frame::before{ position:absolute; content:""; width:406px; height:21px; left:calc(50% - 203px); top:0;
  background:url(../img/showcase/t_frame.svg) no-repeat 0 0 / 100%; }
.t_frame .gf_lora{ margin-left:1em; }
.t_col{ margin-bottom:1.5em; padding:0.4em 1em; font-size:1.15em; }
.t_stick{ position:relative; margin-bottom:1.5em; padding-bottom:0.5em; text-align:center;
  border-bottom:2px solid #834037; }
.t_stick::before, .t_stick::after{ position:absolute; content:""; width:6px; height:6px; bottom:-4px;
  border-radius:50%; background:#834037; }
.t_stick::before{ left:0; }
.t_stick::after{ right:0; }
.t_stick span{ margin-left:1em;font-size:0.9em; }
.t_line{ position:relative; margin-bottom:1.2em; padding-left:1em; }
.t_line::before{ position:absolute; content:""; width:4px; height:80%; left:0; top:calc(50% - 40%);
  background:#c2533b; }

.n_list{ counter-reset: number; margin-bottom:3em; }
.n_list li{ position:relative; margin-bottom:2em; padding-left:2em; }
.n_list li::before { position:absolute; left:0; top:-0.2em;
   counter-increment: number;
   content: counter(num, decimal);
   content: counter(number);
   font-size:1.8em; color:#834037;
   font-family:'Lora', sans-serif; }
.n_list.other li::before{ content:none; }

/* table */
.t_data{ width: 100%; margin:50px 0; background:#FFF; border:3px solid #c2c2c2; }
.t_data tr > *{ padding: 15px 25px; border-bottom: 1px solid #c2c2c2; }
.t_data th{ width: 25%; text-align: left; font-weight:500;
  background:#f6f6f6; border-right: 1px solid #c2c2c2; }
.t_data td{ width: 75%; }
.t_data tr:last-child th, .t_data tr:last-child td{ border-bottom: 0; }

/* link */
.a_link{ width:90%; margin:4em auto; }
.a_link li{ width:30%; }
.a_link a{ display:block; position:relative; padding:0.5em 0;
  text-decoration:none; text-align:center;
  border:1px solid #c2c2c2; }
.a_link a:hover{ color:#222; background:#f1f1f1; }
.a_link a::before{ position:absolute; content:"";
  width: 0; height: 0; top:calc(50% - 3px); right:0.8em;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #bfbfbf; }
.bnr_more{ margin:-1.3em auto 0; text-align:center; }
.bnr_more .a_more{ padding:0.5em 2.5em 0.5em 2em; color:#fff; background:#834037; border:none;
  -webkit-transition:all .3s; transition:all .3s; }
.bnr_more .a_more::before{  border-color:#fff; }
.bnr_more:hover .a_more{ background:#d18276; }
.bnr_more:hover .a_more::before{ border-color:#834037; }
.page_nav{ letter-spacing:0.08em; }
.page_nav li{ margin:0 10px; font-family:'Lora'; }
.page_nav li a{ display:block; position: relative; padding:0.5em 1em; text-align:center; }
.page_nav li a::before{ position:absolute; content:""; bottom:0; left:0; width:0; height:1px;
  background:#333; -webkit-transition:all .3s; transition:all .3s; }
.page_nav li a:hover{ color:#333; }
.page_nav li a:hover::before{ width:100%; }

/* Recruit */
#recruit.index #header{ opacity:0; transition:all .8s;}
#recruit.index #header.fade-in{ opacity:1; }
#recruit .en_title{ color:#9dd2ff; }
#recruit .title .con::before{ background-image: url(../img/recruit/kira1.png); }
#recruit .video{ position:relative; width:100%; margin:0 auto; }
#recruit .video video{ width:100%; margin:-9.3% 0 -3em; }
#recruit .video-control{ position:relative; z-index:1; margin:0 auto 2em; text-align:right; }
#recruit .video-control #mute{ display:inline-block; position:relative; width:40px; cursor:pointer; 
  margin:0 1.5em 0 0; padding-left:1.2em; }
#recruit .video-control #mute::before{ position:absolute; content:""; width:11px; height:13px; left:0; top:calc(50% - 6px);
  background:url(../img/recruit/sound.svg) no-repeat 0 0 / 100%; }
#recruit .video-control #mute.volume::before{ background-image:url(../img/recruit/sound_off.svg); }
#recruit .video-control #mute::after{ content: attr(data-text)"On"; }
#recruit .video-control #mute.volume::after{ content: attr(data-text)"Off"; }

#recruit .bg_diagonal{ position:relative; }
#recruit .bg_diagonal::before{ position:absolute; content:""; z-index: -1;
  width:150%; height:100%; top:0; left:calc(50% - 75%);
  background:#e1f5ff; -webkit-transform:skew(-15deg,-15deg); transform:skew(-15deg,-15deg); }
#recruit .copy_txt1{ margin:1em auto 2.5em; text-align:center; }

.interview .inte_list li {margin-bottom: 30px;}
.interview .inte_list::before {display: block; content:""; width: 23%; order: 1;}
.interview .inte_list::after {display: block; content:""; width: 23%;}

.inte_list li{ width:48%; margin:0 1% 1.5em; }
.inte_list li a{ display:block; position:relative; margin-bottom:1em; text-decoration:none; }
.inte_list .youtube_btn{ position:absolute; display:block; bottom:0; left:0; width:100%; letter-spacing:0.05em;
  padding:0.5em 0 0.5em 30px; text-align:center; background-color:rgba(193,234,255,0.9);
  -webkit-transition:all .3s; transition:all .3s; }
.inte_list li a:hover .youtube_btn{ color:#FFF; background:#177ed5; }
.inte_list .youtube_btn::before{ position:absolute; content:""; width:26px; height:19px; left:1.5em; top:calc(50% - 9px);
  background:url(../img/recruit/youtube.svg) no-repeat 0 0 / 100%;}
.inte_list .sub{ margin:0;}
.inte_list .ex{ margin:0; font-size:0.9em; }
.inte_list .kana{ margin:0; font-size:1.1em; letter-spacing:0.05em; color:#177ed5; }
.culture{ position:relative; }
.culture::before{ position:absolute; content:""; z-index:-1; width:200px; height:200px; left:30%; top:30%;
  background:url(../img/recruit/fuwa.png) no-repeat 0 0 / 100%; }
.requirements .en_title{ line-height: 0.8; }
.tabs .panel { display: none; }

#recruit input[type="submit"], #recruit input[type="button"], #recruit button { background:#177ed5; }
#recruit input[type="submit"]:hover, #recruit input[type="button"]:hover, #recruit button:hover { background:#43a1f1; }
#recruit .btn_col{ padding: 1em 4.5em 1em 4em; font-size:1.1em; background:#e2f5ff; }
#recruit .btn_col:hover{ background:#FFF; }

.cuture_detail .b_sub::before{ background:#43a1f1; }
.concept_list li{ width:100%; margin:0 1%; padding:1.5em; }

.inte_list video {max-width: 1000px;}
.lity-close {position: absolute!important;}

/* Showcase */
#showcase.index .menu-button{ opacity:0; }
#showcase #header.fade-in .menu-button{ opacity:1; }
#showcase .en_title{ color:#e89d92; }
#showcase.event .en_title{ color:#d9b664; }
#showcase.blog .en_title{ color:#96e0e9; }
#showcase .title .con::before{ background-image:url(../img/showcase/kira1.png); }
#showcase.blog .title .con::before{ background-image:url(../img/top/kira8.png); }
#showcase.event .title .con::before{ background-image:url(../img/top/kira7.png); }
#showcase .box{ background-color:rgba(255,255,255,0.7); }
#showcase{ background:url(../img/showcase/bg.jpg); }
#showcase.index #header{ padding:0; }
#showcase.index .sitename{ position:absolute; /*top:30px;*/ z-index:5; left:calc(50% - 85px); }
#showcase.index .page_nav{ position:absolute; width:500px; top:100px; left:calc(50% - 250px); z-index:10; }
#showcase .info{ margin:0 auto 2em; }
#showcase .info .sub{ position:relative; margin: 1.5em auto; padding-bottom:0.5em; text-align:center;
  font-size: 1.15em; border-bottom:2px solid #834037; }
#showcase .concept .title{ margin-bottom:1.5em; }
#showcase .concept .txt{ width:100%; }
#showcase .concept .pic{ width:48%; }
#showcase .concept .a_more{ margin-top:1em; }
.recipe_index_list{ text-align:center; }
.recipe_index_list li{ width:100%; margin-bottom:4em; }
.recipe_index_list .index_col2{ width:46%; }
.recipe_index_list li img{ box-shadow:0px 0px 30px 0 rgba(0, 0, 0, .08); }
.recipe_index{ margin-bottom:2em; }
.recipe_index .bnr_more{ margin-top:1.5em; }
.recipe_index .a_more.jp{ margin-bottom:2em; padding: 1em 4.5em 1em 4em; }
.recipe_index .event_info { margin: 0 auto; padding: 1.5em; 
  background: url(../img/showcase/bnr_season.jpg) no-repeat center center / 100%; }
.recipe_index_list li.event_info img{ box-shadow:none; }
.info_keigu { text-align: right; width: 90%; }
.info_add2 { margin-bottom: 40px; }

/* レシピPDFをリンクするときに下記paddingをつける */
/*.recipe_index .event_info .event_cooking{ padding-left: 50px; }*/

/* Showcase mv */
#showcase .mv{ position:relative; }
.bg_grass{ position:absolute; width:100%; top:210px; }
#showcase .mv .mv_main{ width:100%; margin:0 auto; text-align: center; }
.bg_cloud { overflow: hidden; }
.bg_cloud img{ width:100%; }

/* 太陽 */
.sunlight_spot{ position:absolute; width:350px; top: -50px; left: 0; }

/* 湯気 */
.steam-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; }
.steam-box p{ margin:0; }
@keyframes steam-move-01 {
  0% {
       filter: blur(4px);
       transform: rotateY(0deg);
       transform: scale(0.3, 1.0);
       opacity: 0.75;
       top:0;
   }
   20% {
       transform: rotateY(40deg);
       transform: scale(0.5, 1.0);
   }
   33% {
       transform: rotateY(40deg);
       transform: scale(0.8, 1.2);
   }
   66% {
       transform: rotateY(2deg);
       transform: scaleY(1.2, 0.4);
   }
   100% {
       filter: blur(8px);
       transform: rotateY(50deg);
       transform: scaleY(1.4, 1.2);
       opacity: 0;
       top: -50px;
   }
}
.steam-01 { position: absolute; z-index: 2; top:55%; left:60%;
    -webkit-animation: steam-move-01 5s infinite linear;
    animation: steam-move-01 5s infinite linear;
    transition: all 10s; }

.move { z-index: 3; position: absolute; top:60%; left:60%;
    -webkit-animation: steam-move-01 5s infinite linear;
    animation: steam-move-01 5s infinite linear;
    transition: all 10s; }
.steam-02 { display: none; }

/* 舞う葉 */
.leafBox{ position:absolute; width: 80%; top:40%; left:calc(50% - 40%); }

/* Showcase recipe */
#showcase .t_col{ background-color:rgba(240,67,29,0.15); }
#showcase.event .t_col{ background-color:#f6eccf; }
#showcase.blog .t_col{ background-color:#e0f1f7; }
#showcase .archive .t_stick{ letter-spacing:0.05em; }
.side{ padding:2em 1.5em; /*background-color:rgba(255,214,207,0.55); box-shadow:0px 0px 30px 0 rgba(0, 0, 0, .08);*/ }
#showcase .intro{ margin-bottom:2em; }
#showcase .intro .pic{ margin:0 auto; }
.integ_list{ margin-bottom:2em; }
.integ_list li{ display:-webkit-flex; display:flex; justify-content:space-between; -webkit-justify-content:space-between;
  margin-bottom:0.5em; padding:0 0.8em 0.4em; border-bottom:1px dotted #aa8e8b; }
.integ_list li .item{ max-width:60%; }
.integ_list li .amount{ max-width:36%; margin:0; }
.ingredient{ margin-top:3em; }
.how{ margin-top:3em; }
.products{ margin-top:3em; }
.how .n_list .pic{ margin:2em auto; text-align:center; }
.n_list .t_col{ margin-bottom:1em; padding:0.3em 1em; font-size:1em; }
.products_list li{ width:46%; margin:0 2% 1.5em; }
.products_list li .pic{ text-align:center; }
.products_list li .txt{ line-height:1.5; }
.side .cat_title{ margin-bottom:1.5em; padding-bottom:0.5em; text-align:center; 
  font-size:1.1em; border-bottom:2px solid #aa8e8b; }
.side .cat_list{ margin-bottom:2em; }
.side .cat_list li{ border-bottom:1px dotted #aa8e8b; }
.side .cat_list a{ display:block; padding:0.8em 0.8em; }
.side .cat_list a:hover{ background:#ffe6dc; color:#333; }
#showcase .topics_list{ display:-webkit-flex; display:flex;  -webkit-flex-wrap:wrap; flex-wrap:wrap;
  justify-content:center; -webkit-justify-content:center; }
#showcase .topics_list li{ width:48%; margin:0 1% 1em; }
#showcase .topics_list .category a{ display:block; padding:0.2em 0; text-align:center; font-size:0.9em;
 color:#FFF; background:#834037; }
.recipe_main .topics_list p{ line-height:1.5; }
.recipe_main .prepare ul, .recipe_main .n_list li ul{ margin-bottom:1.5em; counter-reset: number; }
.recipe_main .prepare ul li, .recipe_main .n_list li ul li, .c_list li{ position:relative; margin-bottom:0.4em; padding-left:1em; }
.recipe_main .prepare ul li::before, .recipe_main .n_list li ul li::before, .c_list li::before
  { position:absolute; content:""; width:6px; height:6px; top:10px; left:0;
  border-radius:50%; background:#834037; }

/* 既存ガスイベント投稿 */
#showcase.event{ background:#f7f1e0; }
#showcase.blog{ background:#f2fcff; }

/* reform */
#reform .sitename{ width:150px; }
#reform #header + #contents{ padding-top:1em; }
#reform .en_title{ color:#d8dbda; }
#reform .lead{ position:relative; }
#reform .lead .title{ margin-bottom:2em; }
#reform .title .con::before{ top: -8em; left: 30%; background-image:url(../img/reform/kira1.png); }
#reform .sec_box.lead{ margin-bottom:0; }
#reform .works{ margin-top: -5em; padding:6em 0 2em; background:#f4f4f4; }
.workList.col2 li{ width:100%; margin:0 0 2em; }
.catBox > *{ margin:0 0.6em 1em; padding:0.5em 1em; font-size:0.9em; line-height:1.2; }
.catName{ background:#e2e2e2; }
.kikiName{ position:relative; padding-right:2.3em; background:#deebe7; }
.kikiName::before{ position:absolute; content:""; width:6px; height:6px; right:0.8em; top:calc(50% - 3px);
  border-top: 1px solid #222222; border-right: 1px solid #222222;
  -webkit-transform: rotate(45deg); transform: rotate(45deg); color:#222222; }
.kikiName:hover{ color:#222; background:#FFF; }
#reform .lead .boxTtl{ margin-bottom:4em; text-align:right; }
.lead .box + p .a_arrow{ margin-right:2.5em; padding:0.6em 0.8em; font-size:1em; letter-spacing:0.12em; }
.contactBox{ padding-top:2em; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  #header + #main{ padding-top:6em; }
  .c_title{ width:222px; height:222px; }
  .t_col{ font-size:1.3em; }
  .page_nav li{ font-size:1.2em; }
  .t_stick{ font-size:1.2em; }
  .t_line{ font-size:1.1em; }

  /* Recruit */
  #recruit .en_title{ font-size: 5.8em; transform:rotate(-15deg); }
  .inte_list li{ width:26%; margin-bottom:0; }
  .inte_list .sub{ font-size:1.3em; }
  .culture .txt{ width:100%; }
  .culture .copy_txt2{ text-align:center; }
  .culture .pic{ margin: 0 auto; }

  .concept_list li{ width:46%; margin:0 2% 3.5em; padding:2em; }
  .concept_list li:nth-child(odd){ margin-top:0; }
  .concept_list li:nth-child(even){ margin-top:-3em; }

  /* Showcase */
  #showcase .concept.sec_box{ margin-bottom:3em; }
  #showcase .concept .txt{ width:36%; }
  #showcase .concept .pic{ width:29%; }
  #showcase .concept .pic.concept01{ margin-top:3em; }
  .recipe_index_list{ width:80%; margin:0 auto; }

  /* Showcase recipe */
  #showcase .intro .pic{ width:250px; margin-right:2em; }
  #showcase .intro .txt{ -webkit-box-flex:1; flex:1; }
  #showcase .intro .txt p:first-child{ margin-top:0; }
  .products_list li{ display:-webkit-flex; display:flex; }
  .products_list .pic{ width:120px; margin-right:1em; }
  .products_list .txt{ -webkit-box-flex:1; flex:1; line-height:1.5; }
  #showcase .archive .t_stick{ font-size:1.3em; }
  #showcase .topics_list li{ width:23%; }
  .recipe_main .prepare ul{ padding-left:1em; }

  /* reform */
  .workList.col2 li{ width:46%; margin:0 2% 2.5em; }
  #reform .lead .sub{ font-size:1.3em; font-weight:500; letter-spacing:0.08em; }
  #reform .lead .title .en_title{ display:inline; }
  #reform .lead .title .j_title{ margin-left: 0.8em; font-size: 1.4em; font-weight: 500; }
  #reform .works{ margin-top:-8em; padding:14em 0 2em; }

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
  .c_title{ width:222px; height:222px; }

  /* Recruit */
  #recruit .message .txt{ margin:0 auto; }
  #recruit .message .txt .txt_con{ height:500px; margin:0 auto;
    -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
    -webkit-text-orientation: upright; text-orientation: upright;
    font-size:1.1em; letter-spacing:0.05em; line-height:2.1; }
  #recruit .message .title{ margin-bottom:2em; }
  #recruit .interview .en_title, #recruit .culture .en_title{ margin-bottom:0; }
  .interview .title{ text-align:left; }
  .interview .title .j_title{ padding-left:4em; }
  #recruit .copy_txt1{ margin-top:-2em; text-align:right; }
  .inte_list .youtube_btn{ font-size:1.1em; }
  .inte_list .youtube_btn::before{ width:35px; height:26px; top:calc(50% - 13px); }
  .inte_list .sub{ font-size:1.5em; }
  .inte_list .ex{ font-size:1em; }
  .culture .title{ text-align:left; }
  .culture .txt{ -webkit-box-flex:1; flex:1; padding-top:5em; }
  .culture .pic{ margin-left:5em; }
  #recruit .copy_txt2{ margin-bottom:2.5em; }
  .culture::before{ width:490px; height:490px; }

  #recruit .video-control{ position:absolute; right:30px; top:25px; }
  .challenge .title{ margin-bottom:3em; text-align:left; }
  #recruit .message{ padding-left:20px; }

  /* Showcase */
  #showcase .info{ width:80%; }
  #showcase .concept .title{ margin-bottom:2.5em; }

  /* Showcase mv */
  /* ★★レンガ繰り返し背景★★　春、夏全季節 */
  .bg_grass{ background:url(../img/showcase/bg_grass.png) repeat-x 0 bottom / 66px; }

  /* Showcase recipe */
  .recipe_main{ width:74%; }
  .side{ width:21%; padding:0; }

  /* reform */
  #reform .lead .pic{ width:58%; margin:0 -10% 0 5%; }
  #reform .lead .txt{ width:42%; margin-top:7em; }
  #reform .detailPage .lead .txt{ margin-top:5em; }
  .workList.col2 li{ width:29%; }
  .detailPage .workList.col2 li{ width:46%; }
  #reform .boxTtl .con::before{ left:0; }

}

/* ================================================================
  タブレット
=================================================================== */
/* 1400以下 */
@media screen and (max-width: 1399px) {
  /* Showcase mv */
  .bg_grass{ background:none; }

  /* reform */
  #reform .lead .pic, #reform .lead .txt{ width:50%; }
  #reform .lead .title .j_title{ font-size: 1.3em; }
  #reform .lead .sub{ font-size: 1.2em; }

}

/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {
  /* Showcase mv */
  .bg_cloud{ height:500px; }

}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  .t_frame::before{ width: 280px; left: calc(50% - 140px); height:14px; }

  /* table */
  .t_data{ margin:30px 0; }
  .t_data tr{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .t_data th{ width: 100%; padding: 8px 15px; border:0; }
  .t_data th::before{ left:0; }
  .t_data td{ width: 100%; padding: 10px 15px 20px; border:0; }

  /* Recruit */
   #recruit .bg_diagonal::before{ width:200%; left: calc(50% - 100%); }
   #recruit .cuture_detail .bg_diagonal::before{ width:300%; left: calc(50% - 150%); }
   /* .inte_list .youtube_btn::before{ width:30px; height:27px; top:calc(50% - 11px);left: 0.5em; } */

   .inte_list video {width: 100%;}

  /* Showroom */
  #showcase{ background-size:280px; }
  .bg_cloud{ height:450px; }
  .steam-box{ top:-50px; }
  .steam-01 { top:0; }
  .move { top:0; }
  .recipe_index_list li{ margin-bottom:2em; }

  /* Showcase recipe */
  .side{ margin-top:2em; }

  /* reform */
  #reform .lead .pic{ width:auto; margin:0 -10% 0 5%; }
  #reform .lead .txt{ width:auto; margin-top:-3em; }
  #reform .boxTtl .con::before{ top: 0; }

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  .sitename{ width: 100px !important; }
  .t_frame{ padding-top:1em; font-size: 1.1em; }
  .t_frame::before{ width:160px; left: calc(50% - 80px); height:8px; }
  .t_frame .gf_lora{ margin-left:0.5em; }
  .bnr_more{ margin-top:-1em; }

  /* link */
  .a_link{ width:100%; margin: 3em auto; }
  .a_link li{ width: 31%; }
  .a_link a::before{ right: 0.4em; }

  /* Recruit */
  #recruit .copy_txt1 img{ width:80%; }
  .inte_list {justify-content: space-between;}
  .inte_list li {width: 30%;} 
  .inte_list .kana {font-size: .8em;}
  .inte_list .youtube_btn {font-size: .9em; padding: 0.4em 0 0.5em 24px;}
  .inte_list .youtube_btn::before {width: 19px; height: 19px; left: 0.5em; top: calc(50% - 7px);}

  /* Showroom */
  #showcase.index .sitename{ /*top: 20px;*/ left: calc(50% - 50px); }
  #showcase.index .page_nav{ width:90%; top:80px; left: calc(50% - 45%); font-size: 1em; }
  #showcase.index .page_nav li a{ padding: 0.5em 0.8em; }
  .bg_cloud{ height:260px; }
  .bg_cloud img{ height:260px; }
  .bg_grass{ top: 150px; }

  .sunlight_spot { width: 150px; top: -20px; left: -20px; }
  .recipe_index_list li.event_info .event_cooking{ width:150px; }

  /* reform */
   #reform .lead .boxTtl{ margin-right:2em; }

}