@charset "utf-8";
/* ===================================================
	story CSS
====================================================== */

#main_tit { background: url(../../story/img/tit_bg.webp)no-repeat center center; background-size: cover;}

.view_sp { display: none;}
.inner_md { width: 1100px; max-width: 92%; margin: 0 auto;}
.flex_col { display: flex; justify-content: space-between;}
.tit_en { font-size: 100px;
    color: #f39300;
    font-family: 'Allura';
    line-height: 1;
    letter-spacing: 0;}

@media screen and (max-width: 600px) {
  .view_sp { display: block;}
  .view_pc { display: none;}
  .flex_col { display: block;}


}


/* ---------------------------------------------------
	sec1
------------------------------------------------------ */
#sec1 { padding: 140px 0 100px; text-align: center;}
#sec1 p { line-height: 4em;}
#sec1 p:nth-of-type(1) { position: relative; padding: 0 0 150px; margin: 0 0 60px;}
#sec1 p:nth-of-type(1)::after { position: absolute; bottom: 0; left: 50%; content: ""; display: block; width: 1px; height: 73px; background-color: #aaa;}
#sec1 p:nth-of-type(2) { padding: 0 0 90px;}
#sec1 p span { font-size: 35px;}
#sec1 .sec_photo { position: relative;}
#sec1 .sec_photo .tit_en { position: absolute; transform: rotate(-20deg); left: calc(50% - 550px);}
#sec1 .sec_photo .ofi { width: 100%; height: 600px;}
#sec1 ul { margin: 50px auto;}
#sec1 ul li { width: 31%;}
#sec1 p.txt_history { position: relative; margin: 50px 0; font-size: 80px; color: #9fd7e1; line-height: 2;}
#sec1 p.txt_history::after { position: absolute; bottom: 0; left: calc(50% - 30px); content: ""; display: block; width: 60px; height: 1px; background-color: #aaa;}


@media screen and (max-width: 600px) {
  #sec1 { padding: 80px 0 50px;}
  #sec1 .sec_photo .tit_en { top: -35px; left: 2%; font-size: 70px;}
  #sec1 p { margin: 0 4%; line-height: 2.5em; text-align: left;}
  #sec1 p:nth-of-type(1) { padding: 0 4% 120px; text-align: center;}
  #sec1 p:nth-of-type(2) { padding: 0 0 50px; text-align: center;}
  #sec1 p span { font-size: 30px;}
  #sec1 .sec_photo .ofi { height: 70vw;}
  #sec1 ul { display: flex; margin: 20px auto;}
  #sec1 p.txt_history { margin: 50px 0; font-size: 60px; text-align: center;}
  
}

/* ---------------------------------------------------
	sec2
------------------------------------------------------ */
#sec2 { padding: 100px 0 120px; background: url(../../story/img/bg1.gif);}
#sec2 h2 { padding: 0 0 40px; text-align: center; font-size: 24px;}
#sec2 ul { display: flex; justify-content: center;}
#sec2 ul li { width: 270px; margin-right: 30px; text-align: center; border: 1px solid #949494; font-size: 18px; padding: 33px 0;}
#sec2 ul li:last-of-type { margin-right: 0;}

@media screen and (max-width: 600px) {
  #sec2 { padding: 60px 0 50px;}
  #sec2 h2 { padding: 0 0 20px; font-size: 20px;}
  #sec2 ul { width: 90%; margin: 0 auto; justify-content: center; flex-wrap: wrap;}
  #sec2 ul li { width: 48%; margin: 0 0 15px; padding: 15px 0; font-size: 18px; box-sizing: border-box;}
  #sec2 ul li:nth-of-type(1) { margin-right: 4%;}
}


/* ---------------------------------------------------
	sec3
------------------------------------------------------ */
#sec3 { padding: 110px 0 160px; color: #fff; background: url(../../story/img/sec3_bg.gif);}
#sec3 >p { margin: 0 0 100px; font-size: 24px; text-align: center;}
#sec3 >p span { display: table; margin: 40px auto 58px; font-size: 35px; text-decoration: underline;}
#sec3 ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec3 ul li { position: relative; margin: 0 0 23px; width: 32%;}
#sec3 ul li p { display: table; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 25px; width: 90%; text-align: center;}


@media screen and (max-width: 600px) {
  #sec3 { padding: 60px 0 50px;}
  #sec3 >p { font-size: 20px; padding: 0 4%; margin-bottom: 50px;}
  #sec3 >p span { font-size: 22px; margin: 10px auto;}
  #sec3 ul { justify-content: center;}
  #sec3 ul li { width: 49%; margin: 0 2% 10px 0;}
   #sec3 ul li:nth-of-type(2n) { margin: 0 0 10px;}
  #sec3 ul li p { font-size: 16px;}
}

/* ---------------------------------------------------
	sec4
------------------------------------------------------ */
#sec4 { padding: 110px 0;}
#sec4 h2 { margin: 0 0 70px; text-align: center; font-size: 24px; line-height: 2.5;}
#sec4 h2 span { font-size: 35px;}
#sec4 .flex_col >img { width: 58%; height: 538px;}
#sec4 .flex_col >div { position: relative; width: 38%; padding: 70px 70px 0 0;}
#sec4 .flex_col >div p:nth-of-type(1) { padding: 0 0 30px;}
#sec4 .flex_col >div p span { display: block; font-size: 28px;}
#sec4 .flex_col >div .tit_en { position: absolute; right: 80px; bottom: 40px; transform: rotate(14deg); letter-spacing: 5px;}

@media screen and (max-width: 600px) {
  #sec4 { padding: 50px 0 80px;}
  #sec4 h2 { margin: 0 0 40px; padding: 0 4%; font-size: 20px; line-height: 2;}
  #sec4 h2 span { font-size: 30px;}
  #sec4 .flex_col >img { width: 100%; height: 70vw;}
  #sec4 .flex_col >div { width: 94%; margin: 0 auto; padding: 30px 0 0;}
  #sec4 .flex_col >div p span { font-size: 22px;}
  #sec4 .flex_col >div .tit_en { font-size: 50px; right: 0; bottom: -60px;}
  
}


/* ---------------------------------------------------
	sec5
------------------------------------------------------ */
#sec5 { padding: 70px 0 120px; background: url(../../story/img/bg1.gif); text-align: center;}
#sec5 h2 { font-size: 30px;}
#sec5 h2+p { padding: 10px 0 80px;}
#sec5 ul { display: flex; justify-content: center; margin: 0 0 100px;}
#sec5 ul li { position: relative; background-color: #fff; width: 250px; margin: 0 55px 0 0; padding: 50px 0;}
#sec5 ul li:last-child { margin: 0;}
#sec5 ul li .tit_en { position: absolute; font-size: 70px; right: 0; left: 0; top: -30px; margin: 0 auto;}
#sec5 ul li dt { padding: 0 0 10px; font-size: 30px;}
#sec5 ul li dd { line-height: 2;}
#sec5 ul+p { font-size: 24px;}
#sec5 ul+p span { font-size: 35px;}

@media screen and (max-width: 600px) {
  #sec5 { padding: 50px 0 60px;}
  #sec5 h2 { width: 94%; margin: 0 auto; font-size: 22px;}
  #sec5 h2+p { padding: 10px 4% 50px;}
  #sec5 ul { width: 94%; margin: 0 auto; flex-wrap: wrap; justify-content: center;}
  #sec5 ul li { width: 48%; margin: 0; padding: 30px 0;}
  #sec5 ul li:nth-of-type(1) { margin-right: 4%;}
  #sec5 ul li .tit_en { top: -20px; font-size: 50px;}
  #sec5 ul li dt { font-size: 22px;}
  #sec5 ul li:last-child { margin: 40px 0 0;}
  #sec5 ul+p { padding: 30px 4% 0; font-size: 20px;}
  #sec5 ul+p span { font-size: 30px;}
}

/* ---------------------------------------------------
	sec6
------------------------------------------------------ */
#sec6 { padding: 120px 0 200px;}
#sec6 h2 { margin: 0 0 30px; font-size: 28px;}
#sec6 .history_list:first-of-type { border-top: 1px solid #c7c7c7;}
#sec6 .history_list { display: flex; border-bottom: 1px solid #c7c7c7;}
#sec6 .history_list >dt { width: 210px; padding: 30px; background: url(../../story/img/bg1.gif);}
#sec6 .history_list >dd { width: calc(100% - 210px); padding: 30px;}
#sec6 .history_list >dd dl { display: flex;}
#sec6 .history_list >dd dl dt { width: 62px;}
#sec6 .history_list >dd dl+dl { margin-top: 10px;}
#sec6 .history_list >dd p+dl { margin-top: 10px;}

@media screen and (max-width: 600px) {
  #sec6 { padding: 50px 0 80px;}
  #sec6 h2 { margin: 0 0 20px; font-size: 22px;}
  #sec6 .history_list { display: block;}
  #sec6 .history_list >dt { width: 100%; padding: 10px 4%; box-sizing: border-box;}
  #sec6 .history_list >dd { width: 100%; padding: 20px 4%; box-sizing: border-box;}
  #sec6 .history_list >dd dl { display: block;;}
}