@charset "UTF-8";
/* sp
----------------------------------------------- */
img { width: 100%; }

.message { width: 90%; margin: 0 auto; padding: 15vw 0 8vw; }
.message .midashi01 .en { margin-bottom: 2vw; line-height: 1; }
.message .midashi01 .jp { font-family: var(--gothic) ; }
.message p { margin-bottom: 4vw; font-size: 3.5vw; text-align: justify; line-height: 2; }
.message p span { margin-bottom: 4vw; display: block; font-size: 5vw; font-family: var(--mincho); font-weight: 600; line-height: 1.6; }

.top-ticker-items { width: 100%; margin-bottom: 6vw; }
.top-ticker-item { max-width: 150vw; margin-right: 4vw; }
.top-ticker-item-title { font-size: 15.79vw; font-family: goldenbook; letter-spacing: 0.6vw; opacity: 0.1; }

.philosophy { padding: 20vw 0; background: url(../images/about/philosophy-bg.jpg)top center no-repeat; background-size: cover; }
.philosophy .midashi01 span { text-align: center; }
.philosophy p { width: 90%; margin: 0 auto; text-align: center; line-height: 2.4; }

.features { padding: 15vw 0; }
.features .midashi01 { width: 80%; margin: 0 auto 10vw; }
.features ul { width: 80%; margin: 0 auto; }
.features li { margin-bottom: 10vw; }
.features li dt { margin-bottom: 4vw; padding: 2vw 0 2vw 4vw; font-size: 4vw; font-family: var(--mincho); font-weight: 600; line-height: 1.6; border-bottom: 1px solid; border-left: 4px solid; }
.features li dd { margin-bottom: 12vw; font-size: 3.5vw; line-height: 2; text-align: justify; position: relative; }
.features li dd::after { content: 'FEATURES01'; font-size: 10vw; font-family: goldenbook; letter-spacing: 0.1rem; opacity: 0.1; position: absolute; bottom: -14vw; left: 0; opacity: 0.1; }
.features li:nth-child(2) dd::after { content: 'FEATURES02'; }
.features li:nth-child(3) dd::after { content: 'FEATURES03'; }

.recommend { padding: 20vw 0; background: url(../images/about/recommend_bg.jpg)top center no-repeat; background-size: cover; }
.recommend .midashi01 { margin-bottom: 4vw; padding-top: 5vw; position: relative; }
.recommend .midashi01 .en { text-align: center; display: block; font-size: 16vw; font-family: "goldenbook"; font-weight: 400; letter-spacing: .04rem; position: absolute; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; width: 100%; top: -6vw; opacity: 0.2; color: #fff; }
.recommend .midashi01 .jp { color: #fff; font-family: var(--mincho); text-align: center; display: block; font-size: 5vw; }
.recommend li { width: 90%; padding: 3% 3% 3% 2em; margin: 0 auto 2%; text-indent: -1.5em; line-height: 1.4; font-weight: 600; color: #fff; border-bottom: 1px dashed #868686; }
.recommend li:last-child { padding-bottom: 0; border-bottom: none; }
.recommend li:before { content: "\e928"; font-family: icon; margin-right: 7px; }

.thoughtful { padding: 15vw 0 0; }
.thoughtful .midashi01 { text-align: center; }
.thoughtful p { width: 90%; margin: 0 auto 6vw; text-align: center; line-height: 2; }

/* ========================================
    pc
==========================================*/
@media screen and (min-width: 736px) { 

.message { width: 90%; margin: 0 auto; padding: 80px 0; }
.message p { margin-bottom: 40px; font-size: 18px; }
.message .midashi01 { margin-bottom: 40px; }
.message .midashi01 .en { margin-bottom: 10px; }
.message p { margin-bottom: 20px; font-size: 15px; }
.message p span { margin-bottom: 20px; font-size: 20px; }

.philosophy { padding: 100px 0; background: url(../images/about/philosophy-bg-pc.jpg)top center no-repeat; background-size: cover; }
.philosophy p { width: 90%; max-width: 1200px; margin: 0 auto; }

.features { width: 90%; max-width: 1200px; margin: 0 auto; padding: 100px 0; }
.features .midashi01 { width: 80%; max-width: 1200px; margin: 0 auto 40px; }
.features li { margin-bottom: 60px; }
.features li dt { margin-bottom: 20px; padding: 5px 0 5px 20px; font-size: 24px; border-left: 8px solid; }
.features li dd { margin-bottom: 40px; font-size: 15px; line-height: 2; position: relative; }
.features li dd::after { font-size: 60px; bottom: -80px; }
.features li img { width: 80%; }

.top-ticker-item { max-width: 120vw; margin-right: 60px; }
.top-ticker-item-title { font-size: 130px; letter-spacing: 6px; }

.recommend { padding: 100px 0; background: url(../images/about/recommend_bg-pc.jpg)top center no-repeat; background-size: cover; }
.recommend .midashi01 {margin-bottom: 40px;padding-top: 70px;}
.recommend .midashi01 .en {font-size: 90px;top: -10px;}
.recommend .midashi01 .jp {font-size: 34px;}
.recommend ul { width: 90%; margin: 0 auto; max-width: 1200px; display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.recommend li {padding: 0 0 22px 2em;width: 49%;margin-bottom: 24px;}
.recommend li:last-child,.recommend li:nth-last-of-type(2) {border-bottom: none;padding-bottom: 0;margin-bottom: 0;}
.recommend li:before {content: "\e928";font-family: icon;margin-right: 7px;}

.thoughtful { padding: 100px 0 0; }
.thoughtful p { width: 90%; max-width: 1200px; margin: 0 auto 60px; }
.thoughtful img { width: 900px; margin: 0 auto 60px; }
}

@media screen and (min-width: 900px) {
.message { max-width: 1200px; 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; }
.message div { width: 42%; }
.message div { width: 42%; }
.message img { width: 52%; }

}

@media screen and (min-width: 1100px) {
.features li { margin-bottom: 0; }
.features li dl { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.features li dl div { width: 50%; padding: 0 40px 0 20px; }
.features li dt { margin-bottom: 20px; padding: 5px 0 5px 20px; font-size: 20px; border-left: 8px solid; }
.features li dd { margin-bottom: 40px; font-size: 15px; line-height: 2; position: relative; }
.features li dd::after { font-size: 60px; bottom: -90px; }
.features li img { width: 50%; }
.features li:nth-child(2) img { order: -1; }
.features li:nth-child(2) dl div { padding: 0 20px 0 40px; }

}

/* =============================================
retina用
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.philosophy { background-image: url(../images/about/philosophy-bg-pc@2x.jpg); }
.recommend { background-image: url(../images/about/recommend_bg-pc@2x.jpg); }
}