@charset "UTF-8";

/* sp
----------------------------------------------- */
.top-concept-gallery-items { width: 100%; }
.top-concept-gallery-item { width: 300vw; }
.top-concept-gallery-item img { width: 100%; }

.philosophy { padding: 0 0 12vw; background: url(../images/deco01.png) no-repeat top 10vw left -30vw; background-size: 90vw; position: relative; z-index: -2; }
.philosophy .intro { width: 90%; margin: 0 auto 8vw; }
.philosophy .intro img { width: 100%; position: relative; z-index: -1; }
.philosophy .intro .intro-title { margin-bottom: 2.5vw; font-size: 5.92vw; font-family: var(--mincho); font-weight: 600; text-align: center; line-height: 1.6; }
.philosophy .intro small { margin-bottom: 6vw; color: #eddde4; letter-spacing: 5px; display: block; text-align: center; font-size: 120%; font-family: 'Josefin Sans'; line-height: 1.4; }
.philosophy .intro p { margin: -2vw 0 6vw; line-height: 1.6; text-align: justify; }
.philosophy .lead span { margin-bottom: 1.5vw; padding: 2vw 2vw 1.5vw; font-family: var(--mincho); font-weight: 600; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UzZTlmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZTJlZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==); background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e3e9ff), color-stop(100%, #ffe2ee)); background: -moz-linear-gradient(left, #e3e9ff, #ffe2ee); background: -webkit-linear-gradient(left, #e3e9ff, #ffe2ee); background: linear-gradient(to right, #e3e9ff, #ffe2ee); display: table; }

.philosophy .achievement { background: url(../images/deco01.png) no-repeat top 10vw right -40vw; background-size: 130vw; }
.philosophy .achievement .midashi01 { width: 90%; margin: 0 auto 4vw; text-align: center; }
.philosophy .achievement p { width: 90%; margin: 0 auto 2.5vw; font-size: 4.92vw; font-family: var(--mincho); font-weight: 600; line-height: 1.4; text-align: center; }
.philosophy .achievement p span { margin-bottom: 2vw; display: block; font-size: 85%; }
.philosophy .achievement dl { width: 90%; margin: 0 auto 8vw; text-align: center; }
.philosophy .achievement dl img { width: 100%; margin-bottom: 18vw; }
.philosophy .achievement dt { margin-bottom: 8vw; }
.philosophy .achievement dl dd:first-of-type { margin-bottom: 4vw; font-size: 5.92vw; font-family: var(--mincho); font-weight: 600; position: relative; }
.philosophy .achievement dl dd:first-of-type::before { content: '\e91a'; width: 14vw; height: 14vw; padding-top: 5%; color: #fff; font-size: 6vw; font-family: 'icon'; background: #d2eae5; border-radius: 50px; position: absolute; top: -18vw; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
.philosophy .achievement dl:nth-of-type(2) dd:first-of-type::before { content: '\f097'; background: #d8d9ff; }
.philosophy .achievement dl:nth-of-type(3) dd:first-of-type::before { content: '\e91b'; padding-top: 2%; font-size: 10vw; background: #e6cfde; }
.philosophy .achievement dl p { font-size: 3.68vw; font-family: var(--mincho); font-weight: normal; line-height: 1.6; }

.xsp { display: block; }
.xpc { display: none; }

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

.top-concept-gallery-item { width: 2330px; }

.philosophy { padding: 0; background: url(../images/deco01@2x.png) no-repeat top 480px right -130px; background-size: 930px; }
.philosophy .intro { width: 90%; margin: 0 auto 80px; }
.philosophy .intro .intro-title { margin-bottom: 10px; font-size: 30px; }
.philosophy .intro .flex div { margin-top: -20px; }
.philosophy .intro small { margin-bottom: 60px; letter-spacing: 10px; }
.philosophy .intro p { margin: 0 0 30px; }
.philosophy .lead { font-size: 24px; }
.philosophy .lead span { margin-bottom: 8px; padding: 10px 10px 9px; }

.philosophy .achievement { margin-top: -200px; background: url(../images/deco01.png) no-repeat top left calc(50% - 420px); background-size: 930px; }
.philosophy .achievement .midashi01 { width: 90%; margin: 0 auto 20px; text-align: center; }
.philosophy .achievement p { width: 90%; margin: 0 auto 60px; font-size: 24px; }
.philosophy .achievement p span { margin-bottom: 10px; font-size: 100%; }
.philosophy .achievement dl { width: 50%; margin: 0 auto 40px; text-align: center; }
.philosophy .achievement dl img { width: 392px; margin: 0 auto 80px; }
.philosophy .achievement dt { margin-bottom: 40px; }
.philosophy .achievement dl dd:first-of-type { margin-bottom: 20px; font-size: 35px; }
.philosophy .achievement dl dd:first-of-type::before { width: 65px; height: 65px; padding-top: 18px; font-size: 30px; position: absolute; top: -80px; }
.philosophy .achievement dl:nth-of-type(3) dd:first-of-type::before { padding-top: 14px; font-size: 36px; }
.philosophy .achievement dl p { width: 100%; font-size: 18px; }

@media screen and (min-width: 800px) {
.philosophy { background: url(../images/deco01.png) no-repeat top 10px left calc(50% - 240px) }
.philosophy .intro { width: 100%; }
.philosophy .intro .flex { position: relative; 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; }
.philosophy .intro .flex div { width: 570px; margin: 0 0 0 10%; }
.philosophy .intro img { width: 90%; order: 2; position: absolute; left: calc( 50% + 532px); transform: translateX(-50%); -webkit-transform: translateX(-50%); }

.xsp { display: none; }
.xpc { display: block; }
}

@media screen and (min-width: 900px) {
.philosophy .intro { width: 90%; }
.philosophy .intro .flex div { width: 570px; margin: 0; }
.philosophy .intro img { width: 90%; order: 2; position: absolute; left: calc( 50% + 492px); transform: translateX(-50%); -webkit-transform: translateX(-50%); }

.philosophy .achievement { background: url(../images/deco01.png) no-repeat bottom right calc(50% - 420px); }
.philosophy .achievement .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; }
.philosophy .achievement dl { width: 32%; position: relative; }
.philosophy .achievement dl:first-of-type::after,.philosophy .achievement dl:nth-of-type(2)::after { content: ''; width: 1px; height: 180px; background: #cacaca; position: absolute; bottom: 30px; right: 0;}
.philosophy .achievement dl { width: 32%; }
.philosophy .achievement dl img { width: 100%; }
.philosophy .achievement dl dt { margin-bottom: 100px; }
.philosophy .achievement dl dd:first-of-type { margin-bottom: 20px; font-size: 25px; }
.philosophy .achievement dl dd:first-of-type::before { width: 60px; height: 60px; padding-top: 18px; font-size: 26px; }
.philosophy .achievement dl:nth-of-type(3) dd:first-of-type::before { padding-top: 14px; font-size: 32px; }
.philosophy .achievement dl p { font-size: 15px; }
}

@media screen and (min-width: 1000px) {
.philosophy .intro img { width: 860px; left: calc( 50% + 492px); }

.philosophy .achievement .flex { width: 1000px; margin: 0 auto; }
}

@media screen and (min-width: 1100px) {
.philosophy .intro img { left: 960px; }

}

@media screen and (min-width: 1200px) {
.philosophy .intro { width: 1100px; }
.philosophy .intro .flex div {  margin: 0; }


.philosophy .achievement .flex { width: 1200px; }
.philosophy .achievement dl p { font-size: 16px; }
}

/* 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: url(../images/deco01@2x.png) no-repeat top 480px right -130px; background-size: 930px; }
}
@media screen and (min-width: 800px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 800px) and (min-resolution: 2dppx) { 
.philosophy { background: url(../images/deco01.png) no-repeat top 10px left calc(50% - 240px) }
}