@charset "UTF-8";


@media screen and (min-width: 768px),print {
body{background: url(../images/history/body-back.png) no-repeat top center #FBFBF4;background-size: 100% auto;}

#contentsmain {margin: 0 auto 12.8rem;position: relative;padding: 0 5vw;}
#contentsmain .inner-Box {margin: 0 auto;position: relative;text-align: center;}
#contentsmain .inner-Box h2 {margin-bottom: 2.7rem;position: relative;font-size: 2.4rem;line-height: 1.875;letter-spacing: 0.2em;font-weight: 600;text-align: center;}
#contentsmain .inner-Box h2 span.f-en {font-family: 'Jost', sans-serif;font-size: 3.0rem;line-height: 1.5;letter-spacing: 0.1em;font-weight: 600;text-align: center;color: var(--mred);display: block;margin-bottom: 0.8rem;}
#contentsmain .inner-Box h3.cl-text {margin-bottom: 2.6rem;position: relative;font-size: 2.0rem;line-height: 1.5;letter-spacing: 0.2em;font-weight: 600;text-align: center;}
#contentsmain .inner-Box p.text {margin-bottom: 7rem;position: relative;font-size: 1.6rem;line-height: 2.0;letter-spacing: 0.2em;font-weight: 400;text-align: center;}
#contentsmain .history-Box{margin: 0 auto;position: relative;max-width: 110rem;padding: 5.5rem 0 0;}
#contentsmain .history-Box::before{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 2px;height: 100%;background: linear-gradient(to bottom, rgba(229, 229, 145, 0.56) 0%, rgba(229, 229, 145, 0.56) 88%, rgba(229, 229, 145, 0) 100%);pointer-events: none;}
#contentsmain .inBox {position: relative;padding-right: 50%;margin-bottom: 9.6rem;}
#contentsmain .inBox:nth-child(2n) {padding-right: 0;padding-left: 53.3%;}

#contentsmain .inBox h4.f-en {font-size: 3.0rem;line-height: 1.5;letter-spacing: 0.1em;font-weight: 600;text-align: left;color: var(--mred);position: absolute;left: 50%;padding-left: 3.5rem;}
#contentsmain .inBox h4.f-en::before{content: '';position: absolute;top: 1.6rem;left: -0.7rem;width: 1.4rem;height: 1.4rem;border-radius: 50%;background-color: var(--mred);}
#contentsmain .inBox:nth-child(2n)  h4.f-en{color: var(--mbl);position: absolute;top: 0;left: 50%;margin-left: -25.4rem;text-align: right;width: 22rem;}
#contentsmain .inBox:nth-child(2n)  h4.f-en::before{background-color: var(--mbl);left: 50%;margin-left: 13.7rem;}


#contentsmain .inBox h5 {margin-bottom: 1.2rem;position: relative;font-size: 1.8rem;line-height: 1.5;letter-spacing: 0.1em;font-weight: 500;text-align: left;}
#contentsmain .inBox p.ltext {position: relative;font-size: 1.4rem;line-height: 2.0;letter-spacing: 0.1em;font-weight: 400;text-align: left;padding-right: 3rem;}
#contentsmain .minBox{ margin: 0 auto; position: relative; display: flex; gap: 3.8986%; }
#contentsmain .minBox figure.photo{position: relative;width: 49.3177%;flex-shrink: 0;order: 1;}
#contentsmain .minBox figure.photo img{ width: 100%; height: auto; }
#contentsmain .minBox p.ltext{margin-bottom: 0rem;position: relative;width: 46.7836%;padding: 0;}


#contents01 {position: relative;}
#contents01 .inner-Box {margin: 0 auto;position: relative;max-width: 1220px;padding: 8rem 0rem 0 0rem;}
#contents01 .inner-Box .dicon{position: absolute;top: -3.5rem;left: -12.5rem;width: 26.6rem;}
#contents01 .inner-Box h2 {margin-bottom: 4rem;position: relative;font-size: 2.3rem;line-height: 1.5;letter-spacing: 0.2em;font-weight: 700;text-align: center;}
#contents01 .inner-Box ul{display:grid;grid-template-columns:repeat(3,1fr);gap:2.9091%;padding-right: 11rem;}
#contents01 .inner-Box ul li{position:relative;}
#contents01 .inner-Box ul li h3{max-width:23rem;aspect-ratio:1/1;overflow:hidden;position:relative;margin: 0 auto 2rem;font-size:1.8rem;line-height:1.667;letter-spacing:.1em;font-weight:700;text-align:center;color:#fff;display:flex;align-items:center;justify-content:center;border-radius: 50%;}
#contents01 .inner-Box ul li:nth-child(1) h3 { background: url('../images/history/contents01-photo01.jpg')no-repeat center center; background-size: cover; }
#contents01 .inner-Box ul li:nth-child(2) h3 { background: url('../images/history/contents01-photo02.jpg')no-repeat center center; background-size: cover; }
#contents01 .inner-Box ul li:nth-child(3) h3 { background: url('../images/history/contents01-photo03.jpg')no-repeat center center; background-size: cover; }

#contents01 .inner-Box p.ltext {margin-bottom: 3rem;position: relative;font-size: 1.4rem;line-height: 2.0;letter-spacing: 0.1em;font-weight: 400;text-align: left;}

#contents02 {margin: 0 auto;position: relative;background: url('../images/history/contents02-back01.png')no-repeat top center;padding: 12.2rem 0 0;}
#contents02 .inner-Box {margin: 0 auto;position: relative;padding-bottom: 30.1rem;}
#contents02 .inner-Box h2.cl-text2 {margin-bottom: 0px;position: relative;mix-blend-mode: multiply;:;5.111;font-family: 'Jost', sans-serif;font-size: 9.0rem;line-height: 1.5;letter-spacing: 0.2em;font-weight: 600;text-align: center;}
#contents02 .inner-Box p.text {margin-bottom: 5.2rem;position: relative;font-size: 1.8rem;line-height: 2.5;letter-spacing: 0.2em;font-weight: 400;text-align: center;}
#contents02 .inner-Box .gl-btn{ width: 30.4rem; margin: 0 auto;}

}
@media screen and (min-width:768px) and ( max-width:1200px) {
#contents01 .inner-Box ul{padding-right: 0rem;}
	

	
}

@media screen and (max-width: 767px) {

body{background:url(../images/history/sp-body-back.png) no-repeat top center #FBFBF4;background-size:100% auto;}

#contentsmain{margin: 0 auto 20.833vw;position:relative;padding-top: 2.1vw;}
#contentsmain .inner-Box{margin:0 auto;position:relative;text-align:center;}
#contentsmain .inner-Box h2{margin-bottom: 4.5vw;position:relative;font-size: 4.8vw;line-height: 1.8;letter-spacing: 0.2em;font-weight: 600;text-align: center;}
#contentsmain .inner-Box h2 span.f-en{color:var(--mred);display:block;margin-bottom:2.133vw;font-size: 5.3vw;line-height: 1;letter-spacing: 0.1em;font-weight: 600;text-align: center;}
#contentsmain .inner-Box h3.cl-text{margin-bottom: 4.933vw;position:relative;font-size: 4.3vw;line-height: 1.8;letter-spacing: 0.2em;font-weight: 600;text-align: center;}
#contentsmain .inner-Box p.text{margin-bottom: 5.667vw;position:relative;font-size: 3.7vw;line-height: 2.0;letter-spacing: 0.1em;font-weight: 400;text-align: center;}
#contentsmain .history-Box{margin:0 auto;position:relative;padding: 2vw 10.7vw 0 17.7vw;}
#contentsmain .history-Box::before{content: '';position: absolute;top: 0;left: 12.5vw;width: 2px;height: 100%;background: linear-gradient(to bottom, rgba(229, 229, 145, 0.56) 0%, rgba(229, 229, 145, 0.56) 88%, rgba(229, 229, 145, 0) 100%);pointer-events: none;}
#contentsmain .inBox{position:relative;margin-bottom: 6.9vw;}
#contentsmain .inBox:nth-child(2n){padding-right:0;}

#contentsmain .inBox h4.f-en{color:var(--mred);position: relative;font-size: 5.3vw;line-height: 2.3;letter-spacing: 0.1em;font-weight: 600;text-align: left;}
#contentsmain .inBox h4.f-en::before{content:'';position:absolute;top: 4.967vw;left: -6.4vw;width: 2.733vw;height: 2.733vw;border-radius:50%;background-color:var(--mred);}
#contentsmain .inBox:nth-child(2n) h4.f-en{color:var(--mbl);}
#contentsmain .inBox:nth-child(2n) h4.f-en::before{background-color:var(--mbl);}

#contentsmain .inBox h5{margin-bottom:3.2vw;position:relative;font-size: 4.3vw;line-height: 1.5;letter-spacing: 0.1em;font-weight: 500;text-align: left;}
#contentsmain .inBox p.ltext{position:relative;font-size:3.733vw;line-height:2;letter-spacing:.1em;font-weight:400;text-align:left;}
#contentsmain .minBox{position:relative;}
#contentsmain .minBox figure.photo{position:relative;margin-right: 4.2vw;padding-top: 0.8vw;margin-bottom: 3vw;}
#contentsmain .minBox figure.photo img{width:100%;height:auto;}
#contentsmain .minBox p.ltext{margin-bottom:0;position:relative;padding:0;}

#contents01{position:relative;}
#contents01 .inner-Box{margin:0 auto;position:relative;padding: 11.733vw 0 0;}
#contents01 .inner-Box .dicon{position:absolute;top: -6.833vw;left: 0.367vw;width: 38.533vw;}
#contents01 .inner-Box h2{margin-bottom: 9.767vw;position:relative;font-size: 4.8vw;line-height: 1.9;letter-spacing: 0.2em;font-weight: 700;text-align: center;}
#contents01 .inner-Box ul{}
#contents01 .inner-Box ul li{position:relative;}
#contents01 .inner-Box ul li h3{max-width:61.333vw;aspect-ratio:1/1;overflow:hidden;position:relative;margin: 0 auto 3.333vw;font-size:4.8vw;line-height:1.667;letter-spacing:.1em;font-weight:700;text-align:center;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;}
#contents01 .inner-Box ul li:nth-child(1) h3{background:url('../images/history/contents01-photo01.jpg') no-repeat center center;background-size:cover;}
#contents01 .inner-Box ul li:nth-child(2) h3{background:url('../images/history/contents01-photo02.jpg') no-repeat center center;background-size:cover;}
#contents01 .inner-Box ul li:nth-child(3) h3{background:url('../images/history/contents01-photo03.jpg') no-repeat center center;background-size:cover;}

#contents01 .inner-Box p.ltext{margin-bottom: 9.6vw;position:relative;font-size: 3.7vw;line-height: 2.0;letter-spacing: 0.1em;font-weight: 400;text-align: left;}

#contents02{margin:0 auto;position:relative;background: url('../images/history/sp-contents02-back01.png') no-repeat top center;padding: 6.033vw 0 0;background-size: 100% auto;}
#contents02 .inner-Box{margin:0 auto;position:relative;padding-bottom: 19.967vw;}
#contents02 .inner-Box h2.cl-text2{margin-bottom: 3.2vw;position:relative;mix-blend-mode:multiply;font-size: 12.0vw;line-height: 1.2;letter-spacing: 0.2em;font-weight: 600;text-align: center;padding-left: 2vw;}
#contents02 .inner-Box p.text{margin-bottom: 10.067vw;position:relative;font-size: 3.7vw;line-height: 2.0;letter-spacing: 0.1em;font-weight: 400;text-align: center;}
#contents02 .inner-Box .gl-btn{width: 68.067vw;margin:0 auto;}    

}