@charset "utf-8";
/* CSS Document */
/*--------------------------------------
　Main Index
---------------------------------------*/
/*---------------------------------------------

  tab

  */

.l-partsTab{
    background: #FDF8E3;
}



/*----- tabBox -----*/
.tabBox .tabArea {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: flex-end;
 width: 100%;
 box-sizing: border-box;
}
.tabBox .tabArea .one_tab {
 width: calc((100% - 3rem)/2);
 box-sizing: border-box;
}
.tabBox .tabArea .one_tab a {
 display: flex;
 justify-content: center;
 align-items: center;
 background: #E28E9D;
 width: 100%;
 height: 62px;
 box-sizing: border-box;
 color: #fff;
 font-size: 2.8rem;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 transition-duration: 0.3s;
 border-radius: 30px 30px 0 0;
 cursor: pointer;
 position: relative;
}
.tabBox .tabArea .one_tab:last-child a {
 background-color: #E8A964;
}
.tabBox .tabArea .one_tab a.select {
 height: 86px;
}
.tabBox .tabArea.bottom {
 display: none;
}
.tabBox .tabArea.bottom .one_tab a {
 border-radius: 0 0 20px 20px;
}
/*----- tabContents -----*/
.tabContents .tabContents_inner {
 display: block;
 transition-duration: 0.3s;
 margin: -100px 0 0;
 padding: 100px 0 0;
}
.tabContents .tabContents_inner.is_show {
 display: block;
}
.tabContents .tabContents_inner.is_hide {
 display: none;
}
.tabContents .tab_main {
 background: #fff;
 padding: 3rem 2.5rem;
 border: 5px solid #E28E9D;
}
.tabContents #tab02 .tab_main {
 border-color: #E3B47C; 
}

.l-main-area #tab01 h2:not([class]) {
 color: #E28E9D; 
 line-height: 1.5;
}
/*---------------------------------------------

  modal

  */
/* モーダル全体(背景＋本体) */
.modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 width: 100vw;
 z-index: 99999;
}
/* モーダル背景 */
.modal-bg {
 position: absolute;
 height: 100vh;
 width: 100vw;
 background: rgba(0, 0, 0, 0.8);
}
/* モーダル本体 */
.modal-content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 70%;
 /* overflow-y: auto !important;
 max-height: 80%;
 max-width: 1100px;
 これが無いと「overflow:scroll」が利かない */
 background: #fff;
 margin: auto;
 box-sizing: border-box;
 z-index: 1111;
 border-radius: 10px;
 border: 8px solid #E28E9D;
}
.modal-content .box {
 width: 100%;
 padding: 7rem 5rem 6rem;
 box-sizing: border-box;
 margin: auto;
 position: relative;
}
.js-modal-close .close {
 position: absolute;
 right: 10px;
 top: 10px;
 z-index: 11111;
}
.js-modal-close .close img {
 width: 62px;
}
.modal-content .flex-box {
 display: table;
 width: 100%;
 vertical-align: top;
}
.modal-content .flex-box .image {
 display: table-cell;
 vertical-align: top;
 width: 44%;
}
.modal-content .flex-box .text-box {
 display: table-cell;
 text-align: left;
 vertical-align: top;
 width: 51%;
 padding-left: 5%;
}
.modal-content .flex-box .text-box .ttl {
 font-weight: bold;
 font-size: 2.4rem;
 color: #E28E9D;
 line-height: 1.5;
 padding-bottom: 2rem;
 border-bottom: 2px solid #E28E9D;
}
.modal-content .flex-box .text-box .t-box {
 margin-top: 2rem;
}
.modal-content .flex-box .text-box .t-box .icon {
 float: left;
 width: 90px;
 padding-right: 2rem;
 text-align: center;
}
.modal-content .flex-box .text-box .t-box .icon div:last-child {
 font-size: 12px;
 line-height: 1.4;
}
.modal-content .flex-box .text-box .t-box .txt {
 margin:0 0 0 110px;
}
.modal-content .btn-web {
 width: 60%;
 margin: auto;
 margin-top: 5rem;
 position: relative;
}
.modal-content .btn-web::before {
 content: "";
 display: block;
 width: 100%;
 height: 22px;
 background: url("img/modal_bg01.png") no-repeat center top; 
}
.modal-content .btn-web a {
 max-width: 100%;
 margin: 0 auto 0;
}
/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
 position: fixed;
 width: 100%;
 height: 100%;
}
/*---------------------------------------------

  動画（YouTube）

  */
.movieWrap {
 display: block;
 position: relative;
 width: 100%;
 padding-top: 56.25%;
}
.movieWrap iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
}
@media screen and (max-width: 480px) {
 /*----- tabBox -----*/
 .tabBox .tabArea {
  padding: 0 0;
 }
 .tabBox .tabArea .one_tab {
  width: calc(50% - 0.3rem);
 }
 .tabBox .tabArea .one_tab a {
  padding: 0 2rem;
  height: 46px;
  font-size: 1.5rem;
  border-radius: 10px 10px 0 0;
  line-height: 1.3;
 }
 .tabBox .tabArea .one_tab a.select {
  height: 70px;  
 }
 .tabBox .tabArea .one_tab a::before {
  left: 5px;
  width: 32px;
  height: 25px;
 }
 .tabBox .tabArea.bottom {
  display: flex;
  align-items: flex-start;
 }
 .tabBox .tabArea.bottom .one_tab a {
  border-radius: 0 0 10px 10px;
 }
 /*----- tabContents -----*/
 .tabContents .tabContents_inner {
  margin: -105px 0 0;
  padding: 105px 0 0;
 }
 .tabContents .tab_main {
  padding: 2rem 1.2rem;
  border-width: 2px;
 }
 .tabContents .tab_inner {
  display: block;
  margin: 0 0 0;
 }
 .tabContents .tab_inner .item {
  width: 100%;
  border-bottom: 1px solid #0f347f;
 }
 .tabContents .tab_inner .item:nth-child(1) {
  padding: 3rem 0 3rem 0;
  border-right: none;
 }
 .tabContents .tab_inner .item:nth-child(2) {
  padding: 3rem 0 3rem 0;
 }
 .tabContents .tab_inner .item:nth-child(3) {
  padding: 3rem 0 3rem 0;
  border-right: none;
 }
 .tabContents .tab_inner .item:nth-child(4) {
  padding: 3rem 0 3rem 0;
 }
 .tabContents .tab_inner .item:last-child {
  border-bottom: none;
 }
 .tabContents .tab_inner .ttl_wrap {
  padding: 0 0 1rem;
  border-bottom: 1px solid #e9e9e9;
 }
 .tabContents .tab_inner .icon {
  width: 30px;
 }
 .tabContents .tab_inner .ttl01 {
  width: calc(100% - 30px);
  padding: 0 0 0 1rem;
  font-size: 1.8rem;
 }
 .tabContents .tab_inner .ttl01 span {
  font-size: 1.2rem;
 }
 .tabContents .tab_inner .txt {
  margin: 1.5rem 0 0;
 }
}