@charset "UTF-8";
.concept { padding: 10vw 0 0; }
.concept-ticker-items { width: 100%; }
.concept-ticker-item { color: #f1eee9; font-size: 26.32vw; font-family: "aw-conqueror-didot"; font-weight: 400; letter-spacing: 0.8vw; margin: 0 4vw;  }
.concept-content { margin-bottom: 16vw; position: relative; }
.concept-content:before { content: ''; width: 44vw; height: 28vw; background: url(../images/deco01.png) no-repeat top center; background-size: 100%; position: absolute; bottom: -28vw; right: 1vw; z-index: 1; }
.concept-head { width: 80vw; margin: 0 auto 5vw; z-index: 1; position: relative; }
.concept-head img { width: 100%; }
.concept-title { margin-bottom: 5vw; }
.concept-title .jp { font-size: 3.95vw; font-family: var(--mincho); font-weight: 600; display: block; }
.concept-title .jp span { padding: 2vw; margin-bottom: 1.5vw; color: #fff; background: var(--main); display: table; }
.concept-title .jp b { letter-spacing: 0.04rem; }
.concept-subtitle { width: 76vw; margin-bottom: 5vw; }
.concept-subtitle img { width: 100%; }
.concept-text { width: 80vw; margin: 0 auto; z-index: 2; position: relative; }
.concept-comment { margin-bottom: 8vw; }
.concept-comment p { margin-bottom: 2.5vw; font-size: 3.68vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.concept-comment p b { font-family: var(--mincho); font-weight: 600; letter-spacing: 0.04rem; }
.concept-more { margin-left: 0; }

.about { padding: 16vw 0 20vw; background: url(../images/concept/about-bg.jpg) no-repeat center; background-size: cover; }
.about-head { margin-bottom: 6.5vw; }
.about-title { padding-bottom: 4vw; text-align: center; position: relative; }
.about-title .en { margin-bottom: 2vw; font-size: 11.84vw; font-family: "aw-conqueror-didot"; font-weight: 400; letter-spacing: 0.6vw; display: block; }
.about-title .jp { font-size: 3.95vw; font-family: var(--mincho); display: block; }
.about-text { width: 80vw; margin: auto; }
.about img { width: 100%; margin-bottom: 10vw; }
.about-text-title { width: fit-content; margin-bottom: 2vw; padding: 2.5vw 4vw 1.5vw; color: #fff; font-size: 5vw; font-family: var(--mincho); font-weight: 600; letter-spacing: 0.6vw; background: var(--main); }
.about-text { margin-bottom: 6vw; }
.about-subtitle { width: 80vw; margin: 0 auto 5vw; font-size: 4.61vw; font-family: var(--mincho); font-weight: 600; line-height: 1.6; }
.about-comment { width: 80vw; margin: 0 auto 5vw; }
.about-comment p { font-size: 3.68vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.about-more { margin: auto; background: #fff url(../images/arrow01.png) no-repeat center right 5vw; background-size: 3vw; }

/* =============================================
    pc
================================================*/
@media screen and (min-width: 736px) {
.concept {padding: 80px 0 0;position: relative;}
.concept-ticker-items {height: 185px;position: absolute;top: 80px;}
.concept-ticker-item {font-size: 145px;letter-spacing: 4px;margin: 0 13px;}
.concept-content { width: 90%; max-width: 1200px; margin: 0 auto; }
.concept-content:before {content: '';width: 256px;height: 500px;z-index: 1;top: auto;bottom: -460px;right: 30px;}
.concept-head {width: 90%; margin: 0 auto 80px; }
.concept-title { margin-bottom: 30px; }
.concept-title .en { margin-bottom: 10px; font-size: 75px; letter-spacing: 4px; }
.concept-title .jp { font-size: 18px; text-align: center; }
.concept-title .jp span { padding: 6px 10px 6px 12px; margin: 0; }
.concept-title .jp span.pc { line-height: 1.4; }
.concept-subtitle { width: 60%; margin-bottom: 40px; }
.concept-text { width: 94%; max-width: 1200px; margin: 0 0 80px auto; }
.concept-comment { margin-bottom: 40px; }
.concept-comment p { margin-bottom: 30px; font-size: 15px; }
.concept-more { margin: 0 0 0 auto; }

.about { padding: 110px 0; background: url(../images/concept/about-bg-pc.jpg) no-repeat center; background-size: cover; }
.about-content { width: 90%; max-width: 1200px; margin: auto; }
.about-head { margin: 0;}
.about-content .flex img { width: 70%; margin-bottom: 40px;}
.about-title { padding-bottom: 40px; text-align: left; }
.about-title:after { display: none; }
.about-title .en { margin-bottom: 10px; font-size: 65px; letter-spacing: 4px; }
.about-title .jp { font-size: 15px; }
.about-more { min-width: 240px; padding: 20px 0 17px; font-size: 15px; letter-spacing: 2px; background-position: center right 20px; background-size: 14px; }
.about-text:after {content: '';width: 130px; height: 500px; z-index: 1; top: auto; bottom: -243px; left: -50px; background: url(../images/deco02.png) no-repeat top center;background-size: 100%;position: absolute;transform: rotate(45deg);}
.about-text {width: 88%;padding: 0;margin: 0;}
.about-text-title { margin-bottom: 10px; padding: 9px 14px 8px; color: #fff; font-size: 20px; letter-spacing: 0.1rem; background: var(--main); }
.about-subtitle {width: 100%;margin: 0 auto 30px;font-size: 18px;text-align: left;}
.about-comment { width: 100%; margin-bottom: 40px; }
.about-comment p { font-size: 15px; }
}

@media screen and (min-width: 900px) {
.concept-head { width: 90%; margin: 0 auto 60px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-end; align-items: flex-end; -webkit-flex-wrap: nowrap; flex-wrap: nowrap;}
.concept-head-inner { width: 50%; }
.concept-head > img { width: 440px; }
.concept-subtitle { width: 90%; margin-bottom: 0; }
.about-content .flex { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.about-content .flex img {width: 44%;margin-bottom: 0;}
.about-text {width: 54%;padding: 5px 50px 5px 60px;margin: 0;}
.about-text:after {content: '';width: 156px;height: 500px;z-index: 1;top: auto;bottom: -155px;left: 110px;background: url(../images/deco02.png) no-repeat top center;background-size: 100%;position: absolute;transform: rotate(45deg);}
}

/* retina用
----------------------------------------------- */ 
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.concept-content:before { background: url(../images/deco01@2x.png) no-repeat top center; background-size: 100%; }
.concept-content:after { background: url(../images/deco02@2x.png) no-repeat top center; background-size: 100%; }
.about { background: url(../images/concept/about-bg-pc@2x.jpg) no-repeat center; background-size: cover; }
}