@charset "UTF-8";
/* ---------------------
共通部分 
---------------------*/
#outer {
margin-top: 0;
margin-bottom: 0;
}
#mid {
padding: 0;
}
@media screen and (max-width: 960px) {
#mid {
padding: 0;
}
}
.inner_1130 {
  max-width: 1130px;
  width: 90%;
  margin: 0 auto;
}
.bg_beige {
background-color: #fbf7f2;
}
.fade_Box {
  transition: 1s;
  opacity: 0;
}
.fade_Box.animated { opacity: 1;}
/* メインビジュアル
--------------------- */
.mv_Area {
position: relative;
background-color: #fbf7f2;
padding: 50px 0 20px;
}
.mv_Area .kazari {
position: absolute;
right: 0;
bottom: -20%;
width: 250px;
max-width: 30%;
}
.mv_Area .mv_nav {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.mv_Area .mv_nav li {
width: 49%;
}
.mv_Area .mv_nav li a {
display: block;
padding: 20px 0;
font-size: min(5vw,20px);
letter-spacing: 0.1em;
font-weight: 600;
background-color: #fff;
color: #969696;
text-align: center;
border-right: 3px solid #969696;
border-bottom: 3px solid #969696;
}
.mv_Area .mv_nav li a.here { pointer-events: none;}
.mv_Area .mv_nav li a:hover { opacity: 1;}
.mv_Area .mv_nav li:nth-child(1) a.here,
.mv_Area .mv_nav li:nth-child(1) a:hover {
background-color: #ea676d; color: #fff;
border-right: 3px solid #715846;
border-bottom: 3px solid #715846;
}
.mv_Area .mv_nav li:nth-child(2) a.here,
.mv_Area .mv_nav li:nth-child(2) a:hover {
background-color: #2f3d90; color: #fff;
border-right: 3px solid #eb7c3e;
border-bottom: 3px solid #eb7c3e;
}
/* タイトル部分
--------------------- */
.title_Area {
padding: 50px 0 ;
}
.title_Area h2 {
margin-bottom: 40px;
}
.title_Area .type_text {
text-align: center;
color: #715846;
}
.title_Area .type_text .midashi {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.title_Area .type_text p {
font-size: 14px;
line-height: 2;
}
.title_Area .type_text .btn_type {
width: 480px;
max-width: 80%;
margin: 30px auto 50px;
}
.title_Area .inlink_nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.title_Area .inlink_nav li {
width: 23%;
}
/* 骨格タイプ　おすすめアイテム
--------------------- */
.inlink_pos {
margin-top: -80px;
padding-top: 80px;
width: 100%;
height: 1px;
visibility: hidden;
pointer-events: none;
}
.type_box {
width: 100%;
padding: 70px 0;
}
.type_box h3 {
margin-bottom: 30px;
}
.type_box p {
text-align: center;
color: #715846;
font-size: 14px;
line-height: 2;
word-break: auto-phrase;
}
.type_box .item_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 40px auto;
}
.type_box .item_list li {
width: 18%;
}
.type_box .btn_item {
width: 370px;
max-width: 80%;
margin: 0 auto;
display: block;
}
/* プロダクトラインナップ
--------------------- */
.lineup_Area {
padding: 0 0 80px;
}
.lineup_Area .ttl_img {
margin-top: 100px;
}
.lineup_Area .product_list {
display: flex;
justify-content: space-between;
margin: 60px auto 50px;
}
.lineup_Area .product_list .product_ttl {
width: 10%;
}
.lineup_Area .product_list .product_ttl {
width: 10%;
border-left: 1px solid #715846;
position: relative;
}
.lineup_Area .product_list .product_ttl img {
width: 30px;
margin-left: 10px;
}
.lineup_Area .product_list .product_ttl:before {
content: "";
position: absolute;
left: -1px;
top: 0;
width: 1px;
height: 20px;
background: #eb7c3e;
z-index: 1;
}
.lineup_Area .item_list {
width: 90%;
}
.lineup_Area .item_list ul {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0px auto 40px;
}
.lineup_Area .item_list ul li {
width: 18%;
}
.lineup_Area .btn_item {
display: block;
width: 370px;
max-width: 80%;
margin: 0 auto;
}
/* 骨格タイプ診断モーダル
--------------------- */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}
.modal_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background:#ffefe4;
  cursor: pointer;
  z-index: 1;
}
.modal_content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 900px;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.modal_content .typeshindan {
  max-height: 75svh;
  overflow-y: scroll;
}
.modal_content .typeshindan .type_wrap {
position: relative;
}
.modal_content .typeshindan .osusume {
position: absolute;
left: 0;
right: 0;
bottom:3%;
width: 85%;
margin: auto;
display: flex;
justify-content: space-between;
}
.modal_content .typeshindan .osusume li {
width: 25%;
}
.scroll_Block {
  overflow-y: scroll;
  height: 100%;
}
.close_Area {
  position: fixed;
  top: -60px;
  right: 20px;
  box-sizing: border-box;
  z-index: 1;
}
.modal_close {
  width: 40px;
  height: 40px;
}
@media only screen and (min-width: 751px) and (max-width: 1200px) {}
@media only screen and (max-width: 750px) {
/* ---------------------
共通部分 
---------------------*/
/* メインビジュアル
--------------------- */
.mv_Area {
padding: 0;
background-color: #fff;
}
.mv_Area .inner_1000 {
max-width: 100%;
width: 100%;
}
.mv_Area .mv_nav {
margin-bottom: 0;
}
.mv_Area .mv_nav li {
width: 50%;
}
/* タイトル部分
--------------------- */
.title_Area {
padding: 50px 0 0;
}
.title_Area .inner_1130 {
max-width: 100%;
width: 100%;
}
.title_Area .type_text p {
word-break: auto-phrase;
font-size: 13px;
max-width:90%;
margin:0 auto;
}
.title_Area .inlink_nav li {
width: 50%;
}
/* 骨格タイプ　おすすめアイテム
--------------------- */
.type_box .item_list li {
width: 48%;
}
.type_box .item_list li:nth-child(n+5) {
display: none;
}
/* 骨格タイプ診断モーダル
--------------------- */
.modal_content .typeshindan .osusume {
width: 90%;
bottom: 4%;
}
.modal_content .typeshindan .osusume li {
width: 31%;
}
/* プロダクトラインナップ
--------------------- */
.lineup_Area {
padding: 0 0 20px;
}
.lineup_Area .ttl_img {
margin-top: 70px;
}
.lineup_Area .product_list {
margin-top: 40px;
}
.lineup_Area .product_list .product_ttl img {
width: 22px;
}
.lineup_Area .item_list {
width: 88%;
}
.lineup_Area .item_list ul {
padding-top: 30px;
margin-bottom: 30px;
}
.lineup_Area .item_list ul li {
width: 48%;
}
.lineup_Area .item_list li:nth-child(n+5) {
display: none;
}
.lineup_Area .btn_item {
max-width: 100%;
}
}