/* 共通部分 */
body {font-size: 10px; font-family: 'Noto Serif JP', serif; box-sizing: border-box; color: #333333; font-weight: 300;}
a {transition: all 0.8s; color: #333333;}
a:hover {cursor: pointer; opacity: 0.6!important;}
img { display: block; max-width: 100%; height: auto;}
.sp_block {display: none;}
.big_title {font-size: 1350%; position: absolute; top: -16%; right: 0%; color: #721c01; opacity: 15%; letter-spacing: 0.1em; font-family: 'Merriweather', serif;}
.title {letter-spacing: 0.1em; display: flex; align-items: center;  }
.title::before { border-top: 0.5px solid; content: ""; width: 1.7em; margin-right: 0.7em;margin-top: 2px; color: #666;}
.product_block .title::before {margin-top: 4px;}
#howto .title {justify-content: center;}
#company .title {justify-content: center;}
.slide_block {display: block;}
.slide_block_sp {display: none;}

.btn { position: relative; }
.btn::after { content: "";  margin: auto;  position: absolute; top: 10%; right: 31.2%; bottom: 0; width: 7px; height: 7px;  border-top: 1px solid #333;  border-right: 1px solid #333; transform: rotate(45deg); }
.product_block .btn::after {right: 40.5%;}
@media (max-width: 1100px) {
  body {font-size: 12px;}
  .product_block .btn::after {right: 34%;}
}
@media (max-width: 600px) {
   .sp_none {display: none;}
   .sp_block {display: block;}
   .btn::after { right: 32%; }
   
   body {font-size: 10px;}
   .slide_block {display: none;}
   .slide_block_sp {display: block;}
}

/* header */
header { width: 100%; position: absolute; display: flex; justify-content: space-between; color: #F2EEE9; font-size: 160%; top: 0; z-index: 10; font-family: 'Noto Serif', serif; font-weight: 400; margin-top: 20px;}
header .left { letter-spacing: 0.1em; margin-left: 40px;}
header .left a{ display: block; color: #F2EEE9;}
header .right ul{ display: flex; justify-content: space-between;margin-top: 5px; }
header .right ul li {margin-right: 40px; letter-spacing: 0.1em;}
header .right ul li a {display: block; color: #F2EEE9;}

.btn_t { position: absolute; top: -2%; right: 5%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; z-index: 20;}
.btn-line { width: 100%; height: 1px; background-color: #F2EEE9; position: relative; transition: .2s;}
.btn-line::before,.btn-line::after { content: ""; position: absolute; width: 100%; height: 100%; background-color:#F2EEE9; transition: .2s;}
.btn-line::before { transform: translateY(-10px);}
.btn-line::after {transform: translateY(10px);}
.btn-line.open { background-color: transparent!important;}
.btn-line.open::before,.btn-line.open::after {content: ""; transition: .2s;}
.btn-line.open::before { transform: rotate(45deg);}
.btn-line.open::after { transform: rotate(-45deg);}
.btn_t { display: none;}

#about .btn-line { background-color: #333333;}
#about .btn-line::before,#about .btn-line::after { background-color: #333; }
#about .btn_t {top: 30%;}
#about h1 {margin-top: 15px; width: 200px;}
@media (max-width: 1100px) {
  header { font-size: 16px;}
}
@media (max-width: 800px) {
  #about h1 {margin-top: 12px;}
  header { font-size: 125%;}
  header .left { margin-left: 2%;}
  .btn_t { display: flex;}
  .menu { position: fixed; left:0; top: -100%; width: 100%; display: flex; flex-direction: column; background-color: #F2EEE9;}
  .menu-list { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
  .menu-list:hover { color: #F2EEE9; background-color: rgba(255, 255, 255, 0.5); transition: .3s; cursor: pointer;}
  .menu.open { position: absolute; top: 130px; top: 45px; z-index: 10; transition: .5s; padding-bottom: 5px;}
  .menu {background-color: #F2EEE9;}
  #about .menu.open { top: 80px;}
  header .right ul li { margin-right: 0; height: 50px; line-height: 50px; border-top: 1px solid #ccc;}
  header .right ul li:first-child { border-top: none;}
  header .right ul li a {color: #555; text-align: center;}
}



/* main_block */
.main_block { width: 100%; height: 50vW; position: relative;}
.main_block .slide_block {width: 100%; height: 100%; overflow: hidden; position: relative;}
.main_block .slide_block img{position: absolute; display: none;}
.main_block .copy_block {position: absolute; top: 24%; right: 25%; }
.main_block .copy_block.second { top: 18%; right: 29%; }
.main_block .copy_block p { background-color: #F2EEE9; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 18px 10px 9px 9px; font-size: 1.5vw; letter-spacing: 0.3em;}
.slide-animation{ animation: fadezoom 8s 0s forwards;}
.effect-fade { opacity : 0; transform : translate(0, 45px); transition : all 2000ms;}
.effect-fade.effect-scroll {opacity : 1; transform : translate(0, 0);}
.effect-fade.big_title.effect-scroll {opacity : 15%; transform : translate(0, 0);}

 @keyframes fadezoom {
 0% {
   transform: scale(1);
 }
 100% {
   transform: scale(1.1);
 }
}
@media (max-width: 1100px) {
  .main_block .copy_block {position: absolute; top: 18%; right: 19%; }
  .main_block .copy_block.second { top: 18%; right: 28%; }
  .main_block .copy_block p { font-size: 2.5vw;}
  .main_block {height: 80vW;}
  .main_block img {width: auto; height: 100%; max-width: inherit; width: 100%;}
  .big_title {font-size: 14vw;}
  
}
@media (max-width: 600px) {
  .main_block .copy_block {position: absolute; top: 28%; right: 21%; }
  .main_block .copy_block.second { top: 68.7%; right: 18%;}
  .main_block .copy_block.second p {padding-top: 0;}
  .main_block {height: 150vW;}
  .big_title {font-size: 17vw; top: -5%;}
  .about_block .about_inner { height: 120vw;}
  .main_block .copy_block p {font-size: 4vw;}
  .main_block .slide_block_sp {width: 100%; height: 100%; overflow: hidden; position: relative;}
  .main_block .slide_block_sp img{position: absolute; display: none;} 
}

/* about_block */
.about_block { padding: 200px 0; background-image: url(../images/season_back.jpg);}
.about_block .about_inner{ height: 695px; position: relative; width: 1100px; margin: 0 auto;}
.about_block .about_inner img {position: absolute; }
.about_block .about_inner img:nth-child(1){ width: 425px; left: 24.5%;}
.about_block .about_inner img:nth-child(2){ width: 230px; top: 20.3%;}
.about_block .about_inner img:nth-child(3){ width: 350px; left: 14.5%; bottom: 0;}
.about_block .about_inner .about_text { padding: 60px 70px; background-color: #fff; position: absolute; bottom: 0%; right: 0%;}
.about_block .about_inner .about_text p.title { font-family: 'Noto Serif', serif;}
.about_block .about_inner .about_text h2 {font-size: 240%; margin-top: 30px; line-height: 2.0em; letter-spacing: 0.2em; font-weight: 400;}
.about_block .about_inner .about_text p:nth-child(3) {font-size: 140%; margin-top: 15px; letter-spacing: 0.1em; line-height: 1.8em; }
.btn {font-size: 140%; margin-top: 20px; text-align: center; display: block;}

@media (max-width: 1100px) {
  .about_block { padding: 25vw 0 45vw 0;}
  .about_block .about_inner {width: 100%; height: 70vw;}
  .about_block .about_inner img {z-index: 8; }
  .about_block .about_inner .about_text h2 {font-size: 3.8vw;}
  .about_block .about_inner .about_text p:nth-child(3) {font-size: 2vw;}
  .btn {font-size: 2vw; }
  .about_block .about_inner .about_text { position: relative; width: 80%;     height: 78vw;}
  .about_block .about_inner img:nth-child(1){ width: 38%; top: 37%; left: auto; right: 0;}
  .about_block .about_inner img:nth-child(2){ width: 20%; top: 97.5%; right: 30%;}
  .about_block .about_inner img:nth-child(3){ width: 25%; left: auto; right: 0; bottom: -21.5%;}
}
@media (max-width: 600px) {
  .about_block { padding: 120px 0 80px 0;}
  .about_block .about_inner {height: 205vw;}
  .about_block .about_inner .about_text { width: 89%;}
  .about_block .about_inner .about_text { padding: 15vw 8% 30vw 5%; height: 130vw;}
  .about_block .about_inner .about_text h2{ margin-top: 15px; font-size: 5vw;}
  .about_block .about_inner .about_text p:nth-child(3) {font-size: 3vw; }
  .about_block .about_inner img:nth-child(1){ width: 55vw; top: auto; left: auto; right: 0; bottom: 23%;}
  .about_block .about_inner img:nth-child(2){ width: 30vw; top: auto; bottom: 23%; right: 61%;}
  .about_block .about_inner img:nth-child(3){ width: 45vw; left: auto; right: 25%; bottom: 5.5%;;}
  .btn {font-size: 3vw;}
}

/* product_block */
.product_block { }
.product_block .product_inner{ position: relative; width: 1100px; margin: 0 auto; background-image: url(../images/product_main.png); background-size: 53%; background-repeat: no-repeat; background-position: top right; padding: 100px 0 0 0;}
.product_block .product_inner .product_text p.title { font-family: 'Noto Serif', serif;}
.product_block .product_inner .big_title {right: auto; left: -7%; top: -12%; font-size: 1100%;}
.product_block .product_inner .product_text h2 {font-size: 240%; margin-top: 30px; line-height: 2.0em; letter-spacing: 0.2em; font-weight: 400;}
.product_block .product_inner .product_text p:nth-child(3) {font-size: 140%; margin-top: 15px; letter-spacing: 0.1em; line-height: 1.8em; }
.product_block .product_inner .product_text p:nth-child(4) {font-size: 140%; margin-top: 20px; text-align: center;}
.others_block {display: flex; justify-content: space-between; margin-top: 50px; margin-bottom: 60px;}
.others_block .other_block {width: 17%; display: block;}
.others_block .other_block p{font-size: 140%; text-align: center; margin-top: 15px;}

@media (max-width: 1100px) {
  .product_block .product_inner {width: 100%; background-size: 50vw; background-position: 120% 0;}
  .product_block .product_inner .big_title {font-size: 11vw; left: 2%; top: -8%;}
  .product_block .product_inner .product_text h2 {font-size: 3.8vw;}
  .product_block .product_inner .product_text p:nth-child(3) {font-size: 2vw; }
  .product_block .product_inner .product_text { padding-left: 70px;}
  .others_block .other_block p{font-size: 2vw;}
  
}
@media (max-width: 600px) {
  .product_block .product_inner .big_title  {font-size: 16vw; left: 2%; top: -5%;}
  .product_block .product_inner { background-position: 160% 0%; padding: 22vw 0 0 0; background-size: 70%;}
  .product_block .product_inner .product_text { padding: 0 5%;}
  .product_block .product_inner .product_text h2 {margin-top: 15px; line-height: 1.4em; font-size: 5vw;}
  .others_block {flex-wrap: wrap; justify-content: space-evenly; margin-top: 0;}
  .others_block .other_block {width: 39%; margin-top: 30px;}
  .others_block .other_block p {margin-top: 10px; font-size: 3vw;}
  .product_block .btn::after {right: 27%;}

  .product_block .product_inner .product_text p:nth-child(3) {font-size: 3vw; margin-top: 30px;}
  
  
}


/* howto_block */
.howto_block {}
.howto_block .howto_inner { width: 1100px; margin: 0 auto; padding: 100px 0 0 0; }
.howto_block .howto_inner .title {text-align: center; font-family: 'Noto Serif', serif;}
.howto_block .howto_inner h2 {text-align: center; font-size: 240%; margin-top: 5px; line-height: 2.0em; letter-spacing: 0.2em; font-weight: 400;}
.howto_block .howto_inner .flex_box {display: flex; justify-content: space-between; margin-top: 40px;}
.howto_block .howto_inner .flex_box .flex_block{ width: 26%; position: relative;}
.howto_block .howto_inner .flex_box .flex_block p:nth-child(1){font-size: 200%;position: absolute; top: -25px; left: -20px; writing-mode: vertical-rl; letter-spacing: 0.2em; font-weight: 600;}
.howto_block .howto_inner .flex_box .flex_block p:nth-child(1) span {writing-mode: horizontal-tb; font-size: 150%; font-weight: 400;}
.howto_block .howto_inner .flex_box .flex_block p:nth-child(3){font-size: 140%;margin-top: 8px; line-height: 1.7em; letter-spacing: 0.1em;}

@media (max-width: 1100px) {
  .howto_block .howto_inner {width: 100%;}
  .howto_block .howto_inner .flex_box {flex-direction: column; }
  .howto_block .howto_inner .flex_box .flex_block {width: 50%; margin: 0 auto; margin-bottom: 60px;}
  .howto_block .howto_inner .flex_box .flex_block:last-child {margin-bottom: 0px;}
}
@media (max-width: 600px) {
  .howto_block .howto_inner {width: 100%;}
  .howto_block .howto_inner h2 { line-height: 1.5em; font-size: 5vw;}
  .howto_block .howto_inner .flex_box {flex-direction: column;}
  .howto_block .howto_inner .flex_box .flex_block {width: 70%; margin: 0 auto; margin-bottom: 60px;}
  .howto_block .howto_inner .flex_box .flex_block:last-child {margin-bottom: 0px;}
  .howto_block .howto_inner .flex_box .flex_block p:nth-child(1){font-size: 230%; word-wrap: break-word; height: 220px;}
  .howto_block .howto_inner .flex_box .flex_block p:nth-child(1) span {font-size: 140%;}
  .howto_block .howto_inner .flex_box .flex_block p:nth-child(3){font-size: 3vw;}
  
}

/* company_block */
.company_block .company_inner { width: 1100px; margin: 0 auto; padding: 100px 0 50px 0; }
.company_block .company_inner .title {text-align: center; font-family: 'Noto Serif', serif;}
.company_block .company_inner h2 {text-align: center; font-size: 240%; margin-top: 5px; line-height: 2.0em; letter-spacing: 0.2em; font-weight: 400;}
.company_block .company_inner .flex_box { display: flex;  margin-top: 40px; align-items: center;}
.company_block .company_inner .flex_box .left_block {margin-right: 70px;}
.company_block .company_inner .flex_box h3 {font-size: 220%; margin-bottom: 40px; letter-spacing: 0.1em; font-weight: 400;}
.company_block .company_inner .flex_box dl {font-size: 140%; margin-top: 30px; letter-spacing: 0.1em; display: flex;}
.company_block .company_inner .flex_box dt { width: 30%;}
.company_block .company_inner .flex_box dd { width: 70%; white-space: nowrap;}

@media (max-width: 1100px) {
  .company_block .company_inner .flex_box { flex-direction: column; align-items: center;}
  .company_block .company_inner {width: 100%;}
  .company_block .company_inner .flex_box .left_block { margin-right: 0; width: 65%;}
  .company_block .company_inner .flex_box .left_block iframe { width: 100%;}
  .company_block .company_inner .flex_box .right_block{ margin-top: 50px; width: 65%;}
}
@media (max-width: 600px) {
.company_block .company_inner .flex_box { flex-direction: column; margin-top: 20px;}
.company_block .company_inner .flex_box .right_block{ margin-top: 50px; width: auto;}
.company_block .company_inner .flex_box .left_block { margin-right: 0; width: 100%;}
.company_block .company_inner .flex_box .left_block iframe { width: 100%; height: 100vW;}
.company_block .company_inner .flex_box h3 {text-align: center;}
.company_block .company_inner .flex_box dl { flex-direction: column; text-align: center; font-size: 160%; margin-top: 40px;}
.company_block .company_inner .flex_box dl dt {width: 100%; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 10px;}
.company_block .company_inner .flex_box dl dd {width: 100%;}
.company_block .company_inner h2 { font-size: 5vw}
}

/* footer */
footer {height: 70px; background-color: #e1ded1; text-align: center; line-height: 70px; margin-top: 100px; font-size: 140%; font-family: 'Noto Serif', serif;}
@media (max-width: 600px) {
  footer {margin-top: 0px;}
}

/* about */
#about {background-color: #F2EEE9;}
#about header {color: #333333; position: relative; height: 80px; margin-top: 0; line-height: 80px;}
#about header .right ul li a {color: #333333;}
#about header .left a {color: #333333;}
.about_main {position: relative;}
.about_main .left {height: 42vw; width: 78%; background-color: darkgray; }
.about_main .right {position: absolute; writing-mode: vertical-rl; font-size: 280%; top: 8%; right: 9%; letter-spacing: 0.4em;}
.about_main .right::after { border-right: 1px solid; content: ""; height: 2.5em; margin-top: 3px; color: #666; display: inline-block;}
.about_wrapper { width: 1100px; margin: 0 auto; margin-top: 100px;}
.about_contents {display: flex; height: 650px; box-sizing: border-box;}
.about_contents .text_block { width: 45%;}
.about_contents .text_block h3{ font-size: 280%; font-weight: 400; margin-bottom: 20px; letter-spacing: 0.1em;}
.about_contents .text_block h3.second{ margin-top: 40px;}
.about_contents .text_block p{ font-size: 140%; line-height: 2.3em; letter-spacing: 0.01em;}
.about_contents .text_block .pd_top{ padding-top: 110px;}
.about_contents .img_block { width: 55%; position: relative;}
.about_contents .img_block img{ position: absolute;}
.about_contents .img_block img:nth-child(1) {width: 320px; left: 2.4%; top: 22%;}
.about_contents .img_block img:nth-child(2) {width: 240px; right: 0; top: 28%;}
.about_contents .img_block img:nth-child(3) {width: 218px; left: 19.2%; top: 60%;}
.about_contents .img_block.second img:nth-child(1) {width: 419px; left: 0; top: -3%;}
.about_contents .img_block.second img:nth-child(2) {width: 284px; top: 50%; right: 13%;}

.company_tit {font-size: 280%; text-align: center; margin-bottom: 50px;letter-spacing: 0.3em; font-weight: normal; margin-top: 30px;}
.company_table {width: 80%; border-collapse: collapse; border-spacing: 0; margin: 0 auto;}
.company_table tr{height: 60px;}
.company_table th,td {font-size: 140%; text-align: left; border-top: 1px solid #cccccc; padding-left: 50px; font-weight: normal;}
.company_table tr:last-child th,td {border-bottom: 1px solid #cccccc;}
.company_table th {width: 25%;}
.company_table td {width: 75%;}


@media (max-width: 1100px) {
  .about_wrapper { width: 100%;}
  .about_main .right{ font-size: 2.5vw;}
  .about_contents {width: 95%; margin: 0 auto; height: auto;}
  .about_contents .text_block h3 {font-size: 3vw;}
  .about_contents .text_block p {font-size: 1.4vw;}
  .about_contents .img_block { width: 50vw; }
  .about_contents .text_block { width: 50vw;}

  .about_contents .img_block img:nth-child(1) {width: 25vw; left: 0.8vw; top: 12vw;}
  .about_contents .img_block img:nth-child(2) {width: 19vw; top: 20vw;}
  .about_contents .img_block img:nth-child(3) {width: 15vw; left: 10.7vw; top: 31.4vw;}
  .about_contents .img_block.second img:nth-child(1) {width: 30vw; top: 8vw; left: 5vw;}
.about_contents .img_block.second img:nth-child(2) {width: 22vw; top: 33vw; right: 6vw;}
.company_tit {margin-top: 100px; font-size: 3vw;}
.company_table th,td {font-size: 1.4vw;}


}
@media (max-width: 600px) {
  .about_wrapper { margin-top: 80px;}
  .about_main .left { height: 70vw; width: 80%; overflow: hidden; position: relative;}
  .about_main .left img{ height: 100%; width: auto; max-width: inherit; position: absolute; left: -35%;}
  .about_contents {flex-direction: column; height: auto; width: 90%;}
  .about_contents.second .img_block{ order: 2;}
  .about_contents .img_block { width: 100%; height: 76vw;}
  .about_contents .text_block { width: 100%;}
  .about_main .right{ font-size: 4.6vw; right: 7%; top: 5%;}

  .about_contents .text_block h3 {font-size: 4.6vw;}
  .about_contents .text_block p {font-size: 3.4vw;}

  .about_contents .img_block img:nth-child(1) {width: 50vw; left: 0.8vw; top: 12vw;}
  .about_contents .img_block img:nth-child(2) {width: 34vw; top: 20vw;}
  .about_contents .img_block img:nth-child(3) { width: 25vw; left: 26vw; top: 51vw;}

  .about_contents .img_block.second img:nth-child(1) {width: 60vw; top: 12vw; left: 0;}
.about_contents .img_block.second img:nth-child(2) { width: 42vw; top: 62vw; right: 12vw;}
.company_tit {margin-top: 190px; font-size: 4.6vw; margin-bottom: 25px;}
.company_table th,td {font-size: 3.4vw; padding-left: 0; }
.company_table {width: 100%; margin-bottom: 60px}
.company_table tr th{padding-left: 5%;}
.company_table tr td{padding-right: 5%;}
.company_table tr{height: 80px;}



}