@charset "UTF-8";
/*
    Template: jpreserve
    Theme Name: JPRESERVE CHILD
    Description: JPRESERVEの子テーマ
    Version: 1.0.0
*/

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

* {margin: 0; padding: 0;}

html, body, section, span, div, img, h1, h2, h3, h4, p, nav, header, footer,
table, tr, th, td, a, ol, ul, li, dl, dt, dd {margin:0; padding:0; border:0; outline:0; box-sizing: border-box; background-repeat: no-repeat;}

html {/*font-size: 1rem;*/ font-size: calc(100vw / 110);}
body {background: #FFF; color: #161616; line-height: 1.8; font-family: 'Noto Sans JP', sans-serif; font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;}

#content.zh, .content__title.zh h1, h1.zh, #content.zh h2, .language-dropdown.zh,
.contact__bt.zh, header.zh nav, footer .footer__add.zh, footer .footer__nav.zh, #content.zh .villa__message, #content.zh .zen {font-family: "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", "SimSun", sans-serif;}
.contact__bt.zh {letter-spacing: .12rem;}

.language__box {position: fixed; bottom: 20px; right: 20px; z-index: 9999; font-size: 14px;}
.language__btn {display: inline-flex; align-items: center; position: relative;}
.language__btn::before {position: absolute; content: ''; pointer-events: none; top: 50%; right: 1.2rem; transform: translate(50%, -50%) rotate(45deg); width: 6px; height: 6px; border-bottom: 3px solid #fff; border-right: 3px solid #fff;}
.language__btn select {appearance: none; padding: 6px 28px 6px 20px; border-radius: 5vw; border: 0; background: #161616; color: #fff; cursor: pointer; outline: 0; transition-duration: .5s;}
.language__btn select option {background: #161616; color: #fff; max-width: 120px;}
.language__btn.zh select {padding: 6px 38px 6px 18px;}
.language__btn.click select {background-color: #fee60c; color: #161616; transition-duration: .5s;}
.language__btn.click::before {border-bottom: 3px solid #161616; border-right: 3px solid #161616;}

img {width: 100%; height: auto;}
img.round {border-radius: 1.2vw;}

a {text-decoration: none; transition-duration: .4s;}
a:active, a:hover {text-decoration: none; transition-duration: .5s;}
a img {border: none; text-decoration: none;}
::selection {background-color: #fee60c;}


header {position: relative; height: 0; z-index: 10;}
header .control {position: relative; width: fit-content; height: auto; padding: 2.4rem 3.2rem; border-radius: 0 2rem 2rem 0; /*background: #efefef;*/}
header #logo {display: block; width: 6.5vw; height: auto; margin: 0 0 1.5rem;}
header nav {width: fit-content; letter-spacing: .05rem;}
header ul {list-style:none; padding: 0; margin: 0 auto;}
header li {line-height: 2.2;}
header nav a {color: #161616; font-weight: bold; position: relative; font-size: .9rem;}
header nav a::after {position: absolute; left: 0; content: ''; width: 100%; height: .4rem; background: #fee60c; bottom: 0; transform: scale(0, 1); transform-origin: left top; transition: transform 0.3s; z-index: -2;}
header nav a:hover::after {transform: scale(1, 1);}

.f__bold {font-weight: bold; letter-spacing: .025rem;}

h1, h2, header nav, footer, .villa__message, .zen, .box__text h3, .blog__title, .copyright, #experience h3 {font-family: "Zen Kaku Gothic Antique", sans-serif; font-weight: 700; font-style: normal;}
/*.text__back li {font-weight: normal; font-style: normal; font-family: "Zen Kaku Gothic Antique", sans-serif;}*/

#fv {position: relative; width: 100vw; height: auto; min-height: 50vw;}
#fv h1 {animation: lines 2.5s; position: absolute; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; top: 2.6vw; right: 15vw; font-size: 2.8rem; height: max-content; letter-spacing: .65rem; line-height: 1.65; color: #161616;}
#fv h1 span {display: block; text-indent:1em;}
#fv h1 span:last-child {text-indent:2em; /*margin-top: 2em;*/}
#fv h1.en__catch {writing-mode: unset; font-size: 2.3rem; top: 14.5vw; right: 4.2vw; width: 30vw; letter-spacing: .2rem; text-align: right;}

#fv .fv__img {position: absolute; /*min-width: 300px;*/ animation: lines 3.5s both; animation-delay: .5s;}
#fv .fv__img:nth-child(4) {width: 25.5vw; bottom: 1.4vw; left: 0; }
#fv .fv__img:nth-child(2) {width: 17vw; top: 2.4vw; left: 20vw;}
#fv .fv__img:nth-child(3) {width: 32vw; top: 18vw; left: 33vw;}
#fv .fv__img:nth-child(1) {width: 17vw; bottom: 2vw; right: .5vw;}
/*#fv .fv__img:nth-child(4) {width: 12vw; bottom: 3vw; right: 1.2vw;}*/

.contact__bt {position: fixed; font-weight: bold; transition: 0.3s; top: 30px; right: 20px; width: 13rem; height: auto; padding: .9rem 2.3rem 1rem; background-color: #161616; color: #fff; border-radius: 50vw; z-index: 11;}
.contact__bt::before, .contact__bt::after {position: absolute; content: "→"; top: 50%; transform: translateY(-50%); transition: 0.3s;}
.contact__bt::before {opacity: 0; left: 0;}
.contact__bt::after {opacity: 1; right: 24px;}
.contact__bt:hover {padding: .9rem 2.3rem 1rem 4.5rem; transition: 0.3s; background-color: #f3dd23; color: #161616;}
.contact__bt:hover::after {opacity: 0; right: 0; transition: 0.3s;}
.contact__bt:hover::before {opacity: 1; left: 30px; transition: 0.3s;}
.contact__bt.en {letter-spacing: .15rem;}

/* Google Mapを囲う要素 */
.block__in.map__box {margin: 1.5rem auto 0;}
.map {position: relative; width: 100%; height: 0; padding-top: 75%; overflow:hidden;}
.map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; margin-top: -60px;}

@keyframes fadetext {
  0% {opacity: 0; transform: translateY(20px);}
  100% {opacity: 1; transform: translateY(0);}
}
@keyframes loop {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}
@keyframes lines {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.post_content dd>:last-child, .post_content div>:last-child, .post_content>:last-child {margin-bottom: unset !important;}
.post_content dt{font-weight: normal;}

#content section.text__back::after {content:""; white-space: pre; line-height: 1; position: absolute; left: -3rem; top: -1rem; z-index: -1; color: #f9f8f4; font-size: 20rem; letter-spacing: 1rem; font-family: "Outfit", sans-serif; font-weight: bold;}
#content section#message.text__back::after {content:"MESSAGE";}
#content section#outline.text__back::after {content:"OUTLINE";}
#content section#history.text__back::after {content:"HISTORY";}
#content section#logos.text__back::after {content:"LOGO MARK";}
#content section#policy.text__back::after {content:"POLICY";}
#content section#features.text__back::after {content:"FEATURES";}
#content section#invest.text__back::after {content:"INVEST";}
#content section#noneed.text__back::after {content:"NO NEED";}
#content section#jpinn.text__back::after {content:"JP INN";}
#content section#worry.text__back::after {content:"WORRY";}
#content section#villa.text__back::after {content:"IMPOSSHIBLE\AIS NOTHING"; font-size: 18rem;}
#content section#area.text__back::after {content:"AREA";}
#content section#example.text__back::after {content:"EXAMPLE";}
#content section#service.text__back::after {content:"SERVICE";}

#content section#rebranding.text__back::after {content:"REBRANDING";}
#content section#empowerment.text__back::after {content:"EMPOWERMENT";}
#content section#future.text__back::after {content:"OUR FUTURE";}
#content section#plans.text__back::after {content:"PLANS";}

#content section#vacation.text__back::after {content:"VACATION";}
#content section#language.text__back::after {content:"LANGUAGE\SKILLS";}
#content section#benefit.text__back::after {content:"BENEFIT";}
#content section#severance.text__back::after {content:"SEVERANCE\PAY";}
#content section#workplace.text__back::after {content:"WORKPLACE";}

.p-breadcrumb__item:last-child span {opacity: 1;}

.flex__box p {margin: 0 0 1.5rem;}

#content section {overflow: hidden; padding: 0 0 10rem; position: relative;}
#content section h2{width: fit-content; overflow: hidden; margin: 3rem auto 5rem !important; font-size: 2.5rem; letter-spacing: .35rem; transition: all 0.3s ease-in-out; line-height: unset; border: 0; padding: unset;}
.content__title {width: fit-content; padding: 9rem 0; margin: auto;}
.content__title h1 {writing-mode: vertical-rl; animation: lines 2.5s; margin: 0.5rem auto; font-size: 3rem; letter-spacing: .5rem; line-height: 1.65; height: max-content;}
.content__title h1 span {display: block; text-indent:1em;}

.content__title.en__title {padding: 12rem 0;}
.content__title.en__title h1 {writing-mode: unset; letter-spacing: .2rem; width: fit-content; margin: 0 auto; text-align: center;}

#content main {width: 86%; max-width: 60vw; margin:0 auto 6vw;}
#content main img {padding: 6vw 0 0;}
#content main .fare {font-family: 'Fira Sans', 'Noto Sans JP', Arial, sans-serif;display: block; margin-top: .2rem; margin-left: auto; width: fit-content; font-size: 1.8rem; font-weight: bold; letter-spacing: .05rem;} 
#content main .fare span {font-size: 80%; margin-left:.2rem;} 
#content main .fare i {margin-right:.35rem; color: #002c62;} 

.in__right {text-align: right;}
.in__center {text-align: center;}

/*FLEX***/
.block__in {margin: 0 auto;}
.block__in.flex__in {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.block__in.flex__in .in__two {width: 47%;}

.block__in h3 {width: fit-content; overflow: hidden; margin: 0 0 1.5rem; font-size: 1.3rem;}
p {margin: 0 0 1.5rem !important;}

.top__in h3 {width: fit-content; overflow: hidden; margin: 0 0 1.5rem; font-size: 1.6rem; letter-spacing: .05rem;}
h3.title__center {margin: 0 auto 1.5rem;}

.top__in {width: fit-content; max-width: 47.5rem; margin: 8rem auto 3rem;}
.top__in:last-child {margin: 8rem auto 0;}
.top__in p {margin: 0 0 1rem;}

ul.points {list-style:none; line-height: 2; letter-spacing: .05rem; background-color: #f9f8f4; margin: 2rem auto 0; padding: 2rem 2rem 2rem 3.6rem; border-radius: 1rem;}
ul.points li {position: relative; margin: 0 0 1rem;}
ul.points li:last-child {margin: 0;}
ul.points li::before {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f00c"; position: absolute; left: -1.5rem; top: 0; color: #002c62;}
/*ul.points li.list__icon1::before {content: "\e554";}*/

/* マーカー */
.highlight {display: inline; font-weight: bold; letter-spacing: .035rem; background: linear-gradient(transparent 65%, #fee60c 0); background-repeat: no-repeat; background-size: 0 100%; transition: background-size 1.5s;}
.highlight.marker {background-size: 100% 100%;}

/* 背景色 */
.back1 {background-color: #f9f8f4; padding: 2vw 2.5vw;}

/* 会社情報 */
.wide__fit {width: fit-content; max-width: 80vw; margin: 0 auto;}
.wide__fit50 {width: fit-content; max-width: 50vw; margin: 0 auto;}
.wide90 {width: 90vw; margin: 0 auto;}
.wide80 {width: 80vw; margin: 0 auto;}
.wide70 {width: 70vw; margin: 0 auto;}
.wide65 {width: 65vw; margin: 0 auto;}
.wide60 {width: 60vw; margin: 0 auto;}
.wide50 {width: 50vw; margin: 0 auto;}
.wide40 {width: 40vw; margin: 0 auto;}
.space1 {margin: 2.5vw auto;}
.space2 {margin: 0 auto 5vw;}
.space__right {margin: 0 10vw 5vw 0;}
.wide70.space3 {margin: 4rem auto;}

.img__att {width: 100vw; margin: 6vw auto 2vw;}
.img__att .flex__img {display: flex; justify-content: space-between; flex-wrap: wrap;}
.img__att .flex__img .box__in {width: 31.3%;}
.img__att .flex__img .box__in:nth-child(2) {padding: 5vw 0;}
.img__att .flex__img .box__in:nth-child(3) {padding: 10vw 0 0;}

.img__att.rev__att .flex__img .box__in:nth-child(1) {padding: 10vw 0 0;}
.img__att.rev__att .flex__img .box__in:nth-child(2) {padding: 5vw 0;}
.img__att.rev__att .flex__img .box__in:nth-child(3) {padding: 0;}

.img__att2 {margin: 2vw auto;}
.img__att2 .flex__img .box__in:nth-child(1) {width: 25%;}
.img__att2 .flex__img .box__in:nth-child(2) {width: 39.5%; padding: 4.8vw 0 0 4vw;}
.img__att2 .flex__img .box__in:nth-child(3) {width: 33.5%; padding: 21vw 0 0 3vw;}

.flex__box {display: flex; justify-content: space-between;}
.flex__box.message__box .message__box__in {position: relative;}
.flex__box.message__box .message__box__in:nth-child(1) {width: 24.5vw; top: 8.5vw; left: 1.5vw; z-index: 2;}
.flex__box.message__box .message__box__in:nth-child(2) {width: 17vw; top: -1vw; left: -3vw; z-index: 1;}
.flex__box.message__box .message__box__in:nth-child(3) {width: 41vw; top: 1vw; left: -2vw;}
.flex__box.message__box p.name {text-align: right;}

#villa .flex__box.inn__box {margin: 5vw 0;}
#experience .flex__box.inn__box {margin: 5vw 0;}
.flex__box.inn__box .box__img {width: 28.5vw;}
.flex__box.inn__box .box__text {width: 38vw; /*width: 34.5vw;*/}

.flex__box.inn__box .box__img3 {width: 20.5vw;}
.flex__box.inn__box .box__text3 {width: 42.5vw;}

.flex__box.inn__box .box__img2 {width: 16.5vw;}
.flex__box.inn__box .box__text2 {width: 46.5vw;}

.flex__box.inn__box.movie {padding: 5vw 0;}
.flex__box.inn__box.movie .box__img {width: 44.5vw;}
.flex__box.inn__box.movie .box__text {width: 32.5vw;}

.flex__box.inn__box__2, .flex__box.inn__box__4 {justify-content: space-between; flex-wrap: wrap; gap: 2.5rem 0;}
.flex__box.inn__box__2 .box__in {width: 48.5%;}
.flex__box.inn__box__4 .box__in {width: 23.5%;}

.glay__box .box__in {background-color: #f9f8f4; padding: 1.5rem 2rem 1.8rem;}
.glay__box .box__in h3 {padding: .5rem 0 1rem; width: fit-content; margin: 0 auto 2rem; text-align: center; border-bottom: 1px solid #161616;}
.glay__box .box__in h3 span {display: block; margin: 0 auto 1rem; width: 3.7rem; height: 3.7rem; border-radius: 3.7rem; line-height: 3.7rem; letter-spacing: .2rem; background-color: #161616; color: #fff;}

.villa__message {width: fit-content; max-width: 90%; font-weight: bold; margin: 5rem auto; text-align: center;}

.flex__box.logo__box {column-gap: 0}
.flex__box.logo__box .logo__img {width: 11vw;}
.flex__box.logo__box .logo__text {width: 43vw; padding: 0;}
.content__item__txt {width: calc(100% - 200px); padding: 30px 35px; border-radius: 20px; background-color: #fff;}
.l-content img {width: fit-content; max-width: 300px;}

.content__item__txt p {margin: 0 0 35px; line-height: 2;}
.content__item__txt .btn {float: right;}

.flex__box {display: flex; column-gap: 1rem;}
.flex__box dt, .flex__box dd {padding: 1.5rem;}
.flex__box dt {width: 10rem; font-weight: bold;}
.law__box .flex__box dt {width: 16.8rem;}
.flex__box dd {column-gap: 1rem; flex: 1 1 0%;}

/*HISTORY*/
.history {margin: 50px auto; position: relative;}
.history:after{content: ""; width: 2px; border-left: 2px solid #002E52; position: absolute; top: 15px; bottom: 0; left: 9.8vw;}
.history dl {overflow: hidden;}
.history dt span {width: fit-content; min-width: 7vw; height: 2.37rem; font-size: 1.1rem; font-weight: bold; background: #002c62; color: #fff; letter-spacing: .05rem; line-height: 2.3rem; text-align: center; position: relative; float: left;}
.history dt span:after {display: block; content: ""; width: 0; height: 0; border: 1.2rem solid transparent; border-left-color: #002c62; position: absolute; top: 0; left: 100%;}
.history dd {margin-left: 9.8vw; position: relative; padding: .5rem 0 2rem 2rem;}
.history dd:before {display: block; content: ""; width: 13px; height: 13px; border-radius: 50%; background: #002c62; position: absolute; left: -6px; top: 12px;}
.history dd h3 {font-size: 1.1rem; line-height: 1; padding: 0 0 10px; margin: 0;}
.history dd h3:before {content: unset;}
.history dd p {margin-bottom: 1rem;}
.history dd ul {margin-bottom: 1rem; list-style:square;}

/*footer*/
footer {overflow: hidden; font-size: .9rem;}
.footer__add {background-color: #002c62; color: #fff; padding: 2.4rem 0 2rem;}
.footer__add .footer__add__in {width: 90vw; margin: 0 auto; display: flex; gap: 4rem; align-content: center;}
.footer__add .footer__add__in dl {font-weight: bold; letter-spacing: .05rem;}
.footer__add .footer__add__in dt {font-size: 1rem; margin: 0 0 .5rem;}
.footer__add .footer__add__in dd {font-size: .85rem; margin: 0 0 .5rem;}
 
.footer__nav {background-color: #002c62; padding: 0 0 3rem;}
.footer__nav__in {width: 90vw; border-top: 1px solid #fff; letter-spacing: .05rem; text-align: center; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin: 0 auto;}
.footer__nav__in a {font-size: .85rem; color: #fff;}
.footer__nav__in a:hover {color: #f3dd23;}
.footer__nav__in ul {display: flex; gap:2.4rem; justify-content: center; align-content: center; padding: 3rem 0 0;}
.footer__nav__in li {width: fit-content;}
.footer__nav__in .copyright {font-size: .75rem; color: #fff; padding: 3rem 0 0;}

textarea::placeholder,
input::placeholder {opacity: 0.75; font-size: .95rem;}
/***********************************************************************************************/

/* breadcrumb 改修*/
.-body-solid .p-breadcrumb.-bg-on { box-shadow: none;}
.p-breadcrumb.-bg-on {background: none;}
.p-breadcrumb__list {padding: 0; margin: 0; font-size: .8rem ;}
#breadcrumb {width: 90vw; margin: 0 auto;}

.privacy, .post_content li {line-height: 1.8;}
.privacy section p {margin: 0 0 1rem 1.2rem;} 
.privacy section ul, .privacy section figure {margin-left: 1.2rem;}
.post_content h4 {font-size: 1.1rem; margin: 3rem 0 1.2rem 1.2rem;}

/* テーブル表調整 */
.sp_block_ table, .sp_block_ tbody, .sp_block_ td, .sp_block_ tfoot, .sp_block_ th, .sp_block_ thead, .sp_block_ tr, table.sp_block_ {display: revert !important;}
.sp_block_ td:first-child {width: 9rem !important;}
.sp_block_ table {margin: 0 0 2rem;}


/* 問い合わせフォーム */
.snow-monkey-form p {font-size: .9rem; margin: 1rem 0; line-height: 1.6;}
.snow-monkey-form[data-screen="confirm"] p {display:none;}
ol.smf-progress-tracker {padding-left: 0 !important;}
#autozip {display: none !important; /* ホバーした時に出るメッセージを消去 */}
.smf-action .smf-button-control__control {transition: 0.3s; background-color: #161616; border: 0; background-image: unset; color: #FFF; border-radius: 50vw; font-weight: bold; letter-spacing: .1rem; padding: .9rem 2.7rem 1rem;}
.smf-action .smf-button-control__control:hover {transition: 0.3s; background-color: #f3dd23; color: #161616;}
.smf-form .smf-radio-button-control__control {padding: .45rem;}
.smf-form .smf-checkbox-control__control {padding: .5rem;}
.smf-progress-tracker {margin-bottom: 6rem;}
.smf-complete-content {text-align: center;}

.service__list ul{letter-spacing: .05rem; margin: 2rem auto 0; list-style: none; padding: 0; gap: 1.2rem; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; text-align: center;}
.service__list ul li {width: 22.8%; background-color: #fff; padding: 1rem .5rem; border-radius: .3rem; border: 2px solid #bbb; margin: 0;}
.service__list ul li::before {content: unset;}

.service__list.en ul {width: 80%;}
.service__list.en ul li {width: 48.8%;}

.img__icon {margin: 2rem auto 1rem; width: fit-content; max-width: 300px;}

/* お知らせ */
.news__box dl {margin: 5rem 0; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.news__box dl dt {display: block; width: 120px;}
.news__box dl dd {display: block; width: calc(100% - 120px);}
.news__box dl dd a:hover {text-decoration: underline;}

/* reCAPTCHAのロゴ（バッジ）非表示 */
.grecaptcha-badge {display: none;}
/* 404エラー時 ぱんくず削除 */
.error404 #breadcrumb {display: none;}

.effect span {opacity: 0; display: inline-block; padding: 4px 5px; position: relative; line-height: 1.2;}
.effect span, .effect span::after {animation: var(--duration, 600ms) cubic-bezier(0, 0, 0.3, 0.9) both; animation-iteration-count: var(--iterations, 1);}
.effect.scroll-in span {opacity: 1; position: relative; animation-name: clip-text; white-space: nowrap;}
.effect.scroll-in span::after {content: ""; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; background-color: #002E52; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation-name: text-revealer;}
.effect span.slow, .effect span.slow::after {animation-delay: var(--animation-delay, .6s);}

.effect span.slow__top, .effect span.slow__top::after {animation-delay: var(--animation-delay, .35s);}

/* ズーム エフェクト*/
/*img {transition: 0.3s; object-fit: cover;}
.pop-animation {animation: pop 1s ease;}*/

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes flowimg {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


@media screen and (max-width: 1200px) {
  html {font-size: 1rem;}
  #fv h1, .content__title h1 {font-size: 2.4rem; top: 2.6vw; right: 15vw;}
  #content section h2 {margin: 3rem auto 5rem !important; font-size: 2rem; letter-spacing: .35rem;}
  #fv {width: 100vw; height: auto; min-height: 62vw;}
  
  .content__title.en__title {width: auto; margin: 0; padding: 9rem 0 7rem;}
  .content__title.en__title h1 {width: auto; margin: 0 6.5vw 0 30vw; writing-mode: unset; font-size: 2rem; letter-spacing: .2rem; text-align: right;}

  .post_content h3 {font-size: 1.3rem; margin: 3rem 0 1.2rem;}

  .flex__box.logo__box p {padding: 0;}
  .flex__box.inn__box__4 .box__in {width: 48.5%;}

  .service__list ul{margin: 2rem auto 0; gap: .8rem;}
  .service__list ul li, .service__list.en ul li {width: calc(50% - 0.4rem);}
  .service__list.en ul {width: 100%;}

  .flex__box.logo__box .logo__img {width: 160px;}
  .flex__box.logo__box .logo__text {width: calc(100% - 190px);}

  .history dt span {padding: 0 .2vw 0 .8vw; min-width: 5rem;}
  .history dd {margin-left: 7.6rem; padding: .5rem 0 2rem 2rem;}
  .history:after {left: 7.6rem;}

  footer {margin: 1.3rem 0 0; font-size: .85rem;}
  .footer__add {padding: 2.2rem 0;}
  .footer__nav {padding: 0 0 2rem;}
  .footer__nav__in {display: block; text-align: left;}
  .footer__nav__in ul {display: block; letter-spacing: .02rem; padding: 2.2rem 0 1.5rem;}
  .footer__nav__in li {width: fit-content; margin: 0 0 1rem;}
  .footer__nav__in .copyright {padding: 0;}

  #content main {max-width: unset; margin: 0 auto 5vw;}
  #content main img {padding: 18vw 0 0;}
  #content main .fare {margin-top: .5rem; padding: .3rem .8rem; font-size: 1.2rem;} 
}

@media screen and (min-width: 769px) {
  .pc__text {display: block;}
  .sp__text {display: none;}
}

@media screen and (max-width: 768px) {
  .pc__text {display: none;}
  .sp__text {display: block;}

  html {font-size: 1rem;}
  .wide__fit, .wide__fit50 {width: 86vw; max-width: 86vw;}
  .wide90, .wide80, .wide70, .wide65, .wide60, .wide50, .wide40 {width: 86vw; margin: 0 auto;}

  header .control {padding: 2rem;}
  header #logo {width: 6vw; margin: 0 0 1rem;}

  .service__list.en ul {display: block; width:fit-content; border: 1px solid #bbb; border-radius: .6rem; margin: 0 auto; padding: .8rem 1.6rem 1rem 2.6rem; text-align: left; list-style: disc;}
  .service__list.en ul li {width: 100%; padding: 0; font-size: 1rem; border: 0; line-height: 2.2;}
  .service__list.en ul li::marker {color: #002c62;}

  #content section.text__back::after {font-size: 12rem; left: -1.5rem; white-space: pre;}
  #content section#message.text__back::after {content:"MES\ASAGE";}
  #content section#outline.text__back::after {content:"OUT\ALINE";}
  #content section#history.text__back::after {content:"HIST\AORY";}
  #content section#logos.text__back::after {content:"LOGO\AMARK";}
  #content section#policy.text__back::after {content:"POLI\A CY";}
  #content section#features.text__back::after {content:"FEAT\AURES";}
  #content section#villa.text__back::after {content:"IMPO\ASSHIBLE\AIS\ANOTHING"; font-size: 10rem;}

  .content__title h1 {padding: 0 0 0 10rem;}

  #fv {position: relative; height: 90rem;}
  #fv .fv__img {position: absolute;}
  #fv .fv__img:nth-child(4) {width: 44vw; top: 20rem; left: -2vw;}
  #fv .fv__img:nth-child(2) {width: 50vw; top: 73rem; left: 0;}
  #fv .fv__img:nth-child(3) {width: 80vw; top: 38rem; left: unset; right: 0;}
  #fv .fv__img:nth-child(1) {width: 36vw; top: unset; bottom: 8rem; left: unset; right: 1.5rem;}
  /*#fv .fv__img:nth-child(4) {width: 26vw; bottom: 6rem; left: unset; right: 2.4rem;}*/
  #fv h1 {font-size: 1.85rem; top: 10vw; right: 19vw;}
  #fv h1.en__catch {font-size: 1.5rem; top: 32vw; right: 6.5vw; width: 40vw; line-height: 1.5; letter-spacing: .1rem; text-align: right;}
  header li {line-height: 2;}

  .contact__bt {top: 3vw; right: 3vw; width: fit-content; height: auto; padding: .8rem; line-height: 1; justify-content: center; text-align: center; border-radius: 50%;}
  .contact__bt::before, .contact__bt::after {content: unset;}
  .contact__bt:hover {padding: .8rem;}
  .contact__bt img {max-width: 6vw;}

  .history {width: fit-content;}

  #content section h2 {font-size: 1.5rem;}

  #content section h2 span {text-align: center; display: block; max-width: 90vw; white-space: normal; overflow-wrap: break-word; word-break: break-word; line-height: 1.6;}

  .flex__box.inn__box {flex-direction: column;}
  .flex__box.inn__box.rev {flex-direction: column-reverse;}
  .flex__box.inn__box .box__img, .flex__box.inn__box .box__img2, .flex__box.inn__box .box__img3 {width: fit-content; max-width: 80vw; margin: 0 auto 1.6rem !important;}
  .flex__box.inn__box .box__img.img__illust, .flex__box.inn__box .box__img2.img__illust, .flex__box.inn__box .box__img3.img__illust {max-width: 22rem;}
  .flex__box.inn__box .box__text, .flex__box.inn__box .box__text2, .flex__box.inn__box .box__text3 {width: 100%; margin: 0 auto 1rem;}
  .flex__box.inn__box .box__text h3 {width: fit-content; margin: 3rem auto 1.2rem;}

  .flex__box.inn__box.movie .box__img {width: fit-content; max-width: 90vw; margin: 0 auto 1.6rem !important;}
  .flex__box.inn__box.movie .box__text {width: 100%; margin: 0 auto 1rem;}

  .flex__box dt, .flex__box dd {padding: 1rem;}
  .flex__box dt, .law__box .flex__box dt {width: 8rem;}

  .flex__box.logo__box figure {width: 20vw;}
  .flex__box.logo__box p {width: 100%;}

  .img__att {width: 100%;}
  .img__att .flex__img {gap: 1.5rem 0;}
  .img__att .flex__img .box__in {width: 80vw; margin: 0 auto;}
  .img__att .flex__img .box__in:nth-child(2) {padding: 0;}
  .img__att .flex__img .box__in:nth-child(3) {padding: 0;}

  .img__att.rev__att .flex__img .box__in:nth-child(2) {padding: 0;}

  .img__att2 .flex__img {display: block; margin: 0 auto; width: 90vw;}
  .img__att2 .flex__img .box__in {margin: 0;}
  .img__att2 .flex__img .box__in:nth-child(1) {width: 60vw; margin: 0; padding: 0 0 7vw;}
  .img__att2 .flex__img .box__in:nth-child(2) {width: 80vw; margin: 0 0 0 10vw; padding: 0 0 7.5vw;}
  .img__att2 .flex__img .box__in:nth-child(3) {width: 80vw; padding: 0 0;}

  .footer__add .footer__add__in {display: block;}
  .footer__add .footer__add__in dl:first-child {margin: 0 0 2rem;}
}

@media screen and (min-width: 481px) {
  a[href^="tel:"] {pointer-events: none; color: #161616; font-weight: bold;}
} 

@media screen and (max-width: 480px) {
  html {font-size: .9rem;}
  #content section {padding: 0 0 4.8rem;}
  
  header #logo {margin: 0 0 .6rem;}
  header li {line-height: 1.8;}

  .wide__fit, .wide__fit50 {width: 90vw; max-width: 90vw;}
  .wide90, .wide80, .wide70, .wide65, .wide60, .wide50, .wide40 {width: 90vw; margin: 0 auto;}

  .space3 {margin: 2.5rem auto 0;}

  #content section.text__back::after {font-size: 10rem; left: -1.2rem;}

  #fv {position: relative; height: 68rem;}
  #fv h1 {font-size: 1.65rem; line-height: 1.55; letter-spacing: .4rem;}
  #fv .fv__img:nth-child(4) {width: 48vw; top: 19.5rem; left: -3.5vw;}
  #fv .fv__img:nth-child(2) {width: 52vw; top: 58rem; left: 0;}
  #fv .fv__img:nth-child(3) {width: 80vw; top: 31rem; left: unset; right: 0;}
  #fv .fv__img:nth-child(1) {width: 35vw; top: unset; bottom: 11rem; left: unset; right: 0;}
  /*#fv .fv__img:nth-child(4) {width: 26vw; bottom: 8rem; left: unset; right: 2.4rem;}*/

  .contact__bt, .contact__bt:hover {padding: .6rem;}
  .contact__bt img {max-width: 8.5vw;}
  .content__title {padding: 5.5rem 0 4rem; margin-bottom: 0;}
  .content__title h1 {font-size: 1.65rem; top: 2.6vw; right: 15vw; letter-spacing: .5rem; line-height: 1.4; padding: 0 0 0 7rem;}
  .content__title.en__title h1 {font-size: 1.45rem; letter-spacing: .1rem; text-align: right;}

  #content section h2 {font-size: 1.3rem; letter-spacing: .15rem; margin: 3rem auto !important;}

  .flex__box, .law__box .flex__box {column-gap: .6rem;}
  .law__box .flex__box dt {width: 100%; padding: 0 0 .8rem;}
  .law__box .flex__box dd {padding: 0 0 1.5rem 1rem;}

  .history dt span {min-width: unset; padding: 0 0 0 .6rem; font-size: .9rem;}
  .history dd {margin-left: 6.4rem; padding: .5rem 0 2rem 1.6rem}
  .history dd:before {width: 8px; height: 8px; border-radius: 50%; left: -3px; top: 14px;}
  .history:after {width: 2px; top: 15px; bottom: 0; left: 6.4rem;}

  .block__in h3, .top__in h3 {font-size: 1.2rem; letter-spacing: 0;}
  .post_content h3 {font-size: 1.2rem; margin: 3rem 0 1.1rem;}

  .privacy section p {margin: 0 0 1rem 0;} 
  .privacy section ul, .privacy section figure {margin-left: 0;}
  .post_content h4 {font-size: 1rem; margin: 3rem 0 1.2rem 0;}

  .flex__box.logo__box {display: block;}
  .flex__box.logo__box figure {width: 28vw; margin: 0 auto 2rem;}
  .flex__box.logo__box p {width: 100%; margin: 0 auto;}

  header {top: 3.5vw; left: 3.2vw;}
  header nav {letter-spacing: .02rem;}
  header .control {padding: 0;}
  header nav a {font-size: .8rem;}
  header #logo {width: 3.5rem; margin: 0 0 .5rem;}

  a[href^="tel:"] {pointer-events:all; text-decoration: underline;}

  .flex__box.message__box {display: block;}
  .flex__box.message__box .message__box__in:nth-child(1) {width: 50%; top: 8.5vw; left: 45%;}
  .flex__box.message__box .message__box__in:nth-child(2) {width: 50%; top: -1vw;  left: 5%;}
  .flex__box.message__box .message__box__in:nth-child(3) {width: 100%; top: 0; left: 0;}

  .flex__box.inn__box__2 .box__in, .flex__box.inn__box__4 .box__in {width: 100%;}

  .flex__box.inn__box .box__img.img__illust, .flex__box.inn__box .box__img2.img__illust, .flex__box.inn__box .box__img3.img__illust {max-width: 70vw;}

  ul.points {line-height: 1.6; letter-spacing: .02rem; padding: 1.5rem 1.5rem 1.5rem 3.1rem;}

  .back1 { padding: 1.36rem;}

  .map {padding-top: 100%;}

  .service__list ul {display: block; width:fit-content; border: 1px solid #bbb; border-radius: .6rem; margin: 0 auto; padding: .8rem 1.6rem 1rem 2.6rem; text-align: left; list-style: disc;}
  .service__list ul li {width: 100%; padding: 0; font-size: 1rem; border: 0; line-height: 2.2;}
  .service__list ul li::marker {color: #002c62;}

  header nav a:hover::after {content: unset;}
  .contact__bt:hover {background-color: unset;}
  .pop-animation {animation: unset;}

  .img__icon {margin: 2rem auto .6rem; width: fit-content; max-width: 200px;}

  .top__in {margin: 3rem auto 0;}
  .top__in:last-child {margin: 7rem auto 0;}

  .flex__box.logo__box .logo__img {width: 110px; margin: 1rem auto 2rem;}
  .flex__box.logo__box .logo__text {width: 100%;}

  .news__box dl {margin: 5rem 0; display: block;}
  .news__box dl dt, .news__box dl dd {width: 100%;}

  /*.language__btn select:hover {background-color:#161616;}*/
  .language__box {bottom: 3vw; right: 3vw;}
  .language__btn select {font-size: 12px;padding: 6px 20px 6px 16px;}
  .language__btn.zh select {padding: 6px 32px 6px 16px;}
  .language__btn::before {top: 45%; right: 1.2rem; width: 8px; height: 8px; border-bottom: 2px solid #fff; border-right: 2px solid #fff;}
  
  #content main .fare {margin-top: .5rem; padding: .2rem .5rem .3rem; font-size: 1.1rem;} 
}


@keyframes clip-text {
  from {clip-path: inset(0 100% 0 0);}
  to {clip-path: inset(0 0 0 0);}
}
@keyframes text-revealer {
  0%, 50% {transform-origin: 0 50%;}
  60%, 100% {transform-origin: 100% 50%;}
  60% {transform: scaleX(1);}
  100% {transform: scaleX(0);}
}

.ex__list {display: flex; flex-wrap: wrap; justify-content:space-between; gap: 1rem;}
.ex__list::after{content:""; display: block; width: 31.3%;}
.ex__item p {margin: 0 !important;}
.ex__item {width: 31.3%; margin: 0 0 2rem; border-radius: 6px; color: #161616; letter-spacing: .03rem;}
.ex__title {font-size: 110%; margin: .8rem 0 0; font-weight: bold;}
.ex__img {margin-bottom: 8px; width: 100%; aspect-ratio: 1/1;  display: flex; align-items: center; justify-content: center; overflow: hidden;}
.ex__img img {width: 100%; height: 100%; object-fit: cover;}

/* スマホ: 2列 */
@media (max-width: 768px) {
  .ex__list {padding: 2rem 0 0; gap: 1%;}
  .ex__item, .ex__list::after{width: 47.5%; line-height: 1.5;}
  .ex__title {font-size: 100%; margin: .6rem 0 0;}
  #experience h3 {text-align: left; margin: 3rem 0 1.2rem;}
}