@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-size: 100%;font-family: inherit;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
strong {font-weight:bold;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
figure{margin:0}
option,select {color: #505050;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, picture {display: block;}
img {padding:0; margin:0; vertical-align:bottom; max-width: 100%;}
a { text-decoration:none; color: #505050; transition: .4s;}
a:hover { opacity:0.8;transition: .4s;}

/*
font-family: "Noto Sans JP", sans-serif; Medium 500
font-family: "Jost", sans-serif;
*/

:root {
--en-font:"Jost", sans-serif;
}

body{color:#505050; font-family: "Noto Sans JP", Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN','Yu Gothic', Meiryo; font-weight: 400;line-height: 180%; font-size: 16px; background: url(../images/pc_bg.webp) no-repeat; background-position: bottom; background-size: cover; background-attachment: fixed; letter-spacing: 0.03em;}

.page_wrap {max-width: 1000px; margin: 0px auto; display: flex; justify-content: flex-end; position: relative;}

.navi_area {width: 398px; display: flex; align-items: center; position: fixed; top: 0; transform: translateX(-500px); left: 50%; height: 100%;}
.navi_area > div {width: 100%;}
.navi_area > div > p.logo {width: 260px;}
.navi_area > div > div.navi_cont {background-color: #FFF; padding: 60px; border-radius: 16px; margin-top: 50px;}
.navi_area > div > div.navi_cont > ul li a {font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: space-between;}
.navi_area > div > div.navi_cont > ul li a:after {content: ""; width: 6px; height: 8px; background-color: #1088D9; clip-path: polygon(0 0, 0% 100%, 100% 50%);}
.navi_area > div > div.navi_cont > ul li + li {margin-top: 20px;}
.navi_area > div > ul {margin-top: 100px;}
.navi_area > div > ul li a {display: flex; width: 100%; height: 60px; justify-content: center; align-items: center; border-radius: 30px; font-size: 16px; font-weight: 700; color: #FFF; letter-spacing: 0.05em; background-color: #1088D9; position: relative;}
.navi_area > div > ul li a:after {content: ""; width: 6px; height: 8px; background-color: #FFF; clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; right:20px; top: calc(50% - 4px);}
.navi_area > div > ul li + li {margin-top: 12px;}
.navi_area > div > ul li + li a {background-color:#FF0033 ;}

.main_content {width: 375px; position: relative; background-color: #ECF4FF; height: 100%; overflow-x: hidden;  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);}
.main_content header {width: 375px; height: 60px; position: fixed; box-sizing: border-box; top: 0;
  right: calc((100vw - 1000px)/2);
  transform: none;
  z-index: 100;
  transition: height .4s cubic-bezier(.4,0,.2,1);
  height: 60px;
  overflow: hidden;}
.main_content header.is-open {height: 100vh;}

.main_content header div.header_cont {width: 100%; height: 60px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 102; background-color: #FFF;padding: 0px 10px; box-sizing: border-box;}
.main_content header div.header_cont h1 {width: 178px;}
.main_content header div.header_cont p.recruit_bt a {display: flex; width: 90px; height: 28px; border: 1px solid #FF0033; border-radius: 14px; align-items: center; justify-content: center; font-size: 12px; color: #FF0033; letter-spacing: 0.05em; font-weight: 500; box-sizing: border-box;}
.main_content header div.header_cont div.menu_bt {width: 60px; height: 60px; cursor: pointer; position: relative;z-index: 102;}
.main_content header div.header_cont div.menu_bt span {width: 38px; height: 2px; background-color: #FF0033; position: absolute;}
.main_content header div.header_cont div.menu_bt span:first-child {top: 21px; left: 11px;}
.main_content header div.header_cont div.menu_bt span:nth-child(2) {top: 29px; left: 11px;}
.main_content header div.header_cont div.menu_bt span:nth-child(3) {top: 37px; left: 11px;}

div.menu{ position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  background: rgba(255,255,255,0.95);
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  z-index: 101;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;}
header.is-open .menu{
  transform: translateY(0);
}
body.is-lock{
  overflow: hidden;
}
:target {scroll-margin-top: 60px;
}

div.menu > div.navi_cont {padding: 20px;}
div.menu > div.navi_cont > ul li a {font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: space-between;}
div.menu > div.navi_cont > ul li a:after {content: ""; width: 6px; height: 8px; background-color: #1088D9; clip-path: polygon(0 0, 0% 100%, 100% 50%);}
div.menu > div.navi_cont > ul li + li {margin-top: 20px;}
div.menu >  ul {margin-top: 50px; padding: 0px 20px;}
div.menu >  ul li a {display: flex; width: 100%; height: 60px; justify-content: center; align-items: center; border-radius: 30px; font-size: 16px; font-weight: 700; color: #FFF; letter-spacing: 0.05em; background-color: #1088D9; position: relative;}
div.menu >  ul li a:after {content: ""; width: 6px; height: 8px; background-color: #FFF; clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; right:20px; top: calc(50% - 4px);}
div.menu >  ul li + li {margin-top: 12px;}
div.menu >  ul li + li a {background-color:#FF0033 ;}

div.link {background-color: #FFF; padding: 7px 0px; position: fixed; bottom: 0; z-index: 10; width:375px;}
div.link > ul {display: flex; align-items: center; justify-content: center;}
div.link > ul li a {display: flex; width: 176px; height: 46px; justify-content: center; align-items: center; border-radius: 30px; font-size: 16px; font-weight: 700; color: #FFF; letter-spacing: 0.05em; background-color: #1088D9; position: relative;}
div.link > ul li a:after {content: ""; width: 6px; height: 8px; background-color: #FFF; clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; right:15px; top: calc(50% - 4px);}
div.link > ul li + li {margin-left: 7px;}
div.link > ul li + li a {background-color:#FF0033 ;}

.page_wrap > p.copy {font-size: 12px; position: fixed; bottom: 10px; right: 20px;}

.details div.up {padding: 40px 20px 50px;background-color: #FFF;}
.details div.up h2 {text-align: center; font-size: 24px; font-weight: 700;}
.details div.up p {text-align: center; margin-top: 30px; font-size: 16px; font-weight: 700; line-height: 200%;}
.details div.up p span {color:#1088D9;}
.details div.up h3 {margin-top: 30px; font-size: 20px; font-weight: 700; text-align: center; line-height: 200%;}
.details div.up h3 span {font-size: 24px; color:#1088D9;}
.details div.up h3 em {background: linear-gradient(transparent 80%, #FFE100 80%);}
.details div.up figure {margin-top: 30px;}
.details div.up figure img { border-radius: 16px;}

.details div.middle { background-color: #1A6DB2; padding: 50px 20px 40px;}
.details div.middle h4 {font-size: 24px; text-align: center; font-weight: 700; color: #FFF;}
.details div.middle h4 span {background: url(../images/details_line.png) no-repeat; background-position: bottom; padding-bottom: 10px;}
.details div.middle ul {margin-top: 30px;}
.details div.middle ul li + li {margin-top: 14px;}

.details div.under {position: relative; padding: 88px 0px 56px;}
.details div.under:before {content: ""; width: 100%; height: 48px; clip-path: polygon(50% 100%, 0 0, 100% 0); background-color: #1A6DB2; position: absolute; top: -1px; left: 0;}
.details div.under h5 {font-size: 20px; font-weight: 700; text-align: center; line-height: 200%;}
.details div.under h5 span {font-size: 34px; font-weight: 800; color: #1088D9;}
.details div.under ul {margin-top: 30px; padding: 0px 20px;}
.details div.under ul li + li {margin-top: 20px;}

.place {background-color: #1088D9; padding: 50px 0px;}
.place > h2 {font-size: 24px; font-weight: 700; text-align: center; color: #FFF;}
.place > p.en {text-align: center; font-size: 15px; color: #E4E4E4; font-family: var(--en-font); letter-spacing: 0.1em; margin-top: 6px;}
.place > div {padding: 0px 20px; margin-top: 34px;}

.entry_area {background-color: #FFF; padding: 30px 20px;}
.entry_area p {margin-top: 16px;}
.entry_area p a {position: relative; display: block;}
.entry_area p a img {position: relative; z-index: 1;}
.entry_area p a:after {content: ""; width: 100%; height: 75px; background-color: #960000; border-radius: 35px; position: absolute; left: 0; top: 5px; z-index: 0;}
.entry_area p a:hover img {top: 5px;}

.work {background-color: #ECF4FF; padding: 50px 0px;}
.work > h2 {font-size: 24px; font-weight: 700; text-align: center;}
.work > p.en {text-align: center; font-size: 15px; color: #1088D9; font-family: var(--en-font); letter-spacing: 0.1em; margin-top: 6px;}
.work > div {margin: 34px 20px 0px; padding: 4px 20px; border-radius: 18px; background-color: #FFF;}
.work > div figure {display: flex; padding: 16px 0px; align-items: center;}
.work > div figure picture {width: 100px; flex-shrink: 0; margin-right: 16px;}
.work > div figure figcaption dl dt {font-size: 15px; color: #1088D9; font-family: var(--en-font); letter-spacing: 0.1em; font-weight: 500;}
.work > div figure figcaption dl dd {color: #1088D9;font-size: 20px; font-weight: 700; margin-top: 5px;}
.work > div figure + figure {border-top: 2px solid #ECF4FF;}

.interview {background-color: #FFF; padding: 50px 0px;}
.interview > h2 {font-size: 24px; font-weight: 700; text-align: center;}
.interview > h2 + p {font-size: 14px; font-weight: 700; margin-top: 10px; text-align: center;}

.interview_list {margin-top: 35px;}
.swiper-slide {width: 100%; padding: 20px; box-sizing: border-box;}
.interview_list div.item {position: relative; border: 2px solid #D3DAE4; border-radius: 16px; box-sizing: border-box; padding: 30px 20px;}
.interview_list div.item > dl {position: absolute; right: -10px; top: -15px; display: flex; flex-direction: column; align-items: flex-end;}
.interview_list div.item > dl dt {font-size: 15px; color: #1088D9; font-family: var(--en-font); letter-spacing: 0.1em; font-weight: 500; position: relative; z-index: 1;}
.interview_list div.item > dl dd {font-size: 52px; color: #1088D9; font-family: var(--en-font); line-height: 100%;position: relative; z-index: 0}
.interview_list div.item > dl span {background-color: #FFF; padding: 5px 10px;}
.interview_list div.item figure picture {padding-right: 55px;}
.interview_list div.item figure picture img {width: 100%; height: 100%; aspect-ratio: 11 / 8; object-fit: cover;}
.interview_list div.item figure figcaption {margin-top: 10px;}
.interview_list div.item figure figcaption ul {display: flex; flex-direction: column;}
.interview_list div.item figure figcaption ul li {display: inline-block; font-size: 14px; }
.interview_list div.item figure figcaption ul li span {background-color: #ECF4FF; color: #1088D9; padding: 3px 10px; border-radius: 30px;}
.interview_list div.item figure figcaption ul li + li {margin-top: 3px;}
.interview_list div.item figure figcaption p.bt {height: 44px; width: 100%; background-color: #1088D9; color: #FFF;font-size: 14px; font-weight: 700; padding: 0px 20px; display: flex; align-items: center; justify-content: space-between; position: relative; box-sizing: border-box; border-radius: 30px; cursor: pointer; margin-top: 15px;}
.interview_list div.item figure figcaption p.bt:after {content: ""; width: 6px; height: 8px; background-color: #FFF; clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; right:20px; top: calc(50% - 4px);}
.interview_list div.item figure figcaption p.bt:hover {opacity: .7;}
.custom-pager {display: flex; align-items: center; justify-content: center; gap:0 20px; margin-top: 10px;}
.custom-pager .numbers {display: flex; align-items: center; justify-content: center; gap:0 20px; font-family: var(--en-font); line-height: 100%;}
.custom-pager .numbers > span {cursor: pointer;}
.custom-pager > span {line-height: 100%;width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; background-color: #D3DAE4; border-radius: 100%; cursor: pointer;font-family: var(--en-font);}
.custom-pager > span:hover {opacity: .7;}
.custom-pager .numbers > span:hover {opacity: .7;}

.modal_layer {position:fixed;inset:0;z-index:9999;display:none;}
.modal_layer.active{display:block;}
.modal_bg{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.modal_box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;max-width:356px;max-height:85vh;background:#fff;border-radius:12px;display:flex;flex-direction:column;}
.modal_item{display:none;}
.modal_item.active{display:block;}
div.close {display: flex; justify-content: flex-end;}
div.closeu {display: flex; justify-content: center; margin-top: 30px;}
p.modal_close {cursor:pointer; font-size: 14px; padding: 0px 20px; position: relative; display: flex; align-items: center; line-height: 100%;}
p.modal_close:after {content: url(../images/close_icon.svg); display: inline-block; flex-shrink: 0; margin-left: 5px;}
.modal_content{overflow-y:auto;-webkit-overflow-scrolling: touch;padding:20px 0px 40px;max-height:85vh;}
body.modal_open{position:fixed;width:100%;overflow:hidden;}

.modal_item > div figure.head {margin-top: 24px; position: relative;}
.modal_item > div figure.head picture {padding: 0px 20px;}
.modal_item > div figure.head picture img {border-radius: 16px; width: 100%; height: 229px; object-fit: cover;}
.modal_item > div figure.head figcaption {width: 260px; background-color: #1088D9; padding: 16px 20px; position: absolute; bottom: -61px; left: 0;}
.modal_item > div figure.head figcaption:before {content: ""; clip-path: polygon(100% 0, 0 0, 0 100%); width:125px; height: 100%; background-color: #0D74C2; position: absolute; left: 0; top: 0; z-index: 0;}
.modal_item > div figure.head figcaption > div {position: relative; z-index: 1;}
.modal_item > div figure.head figcaption p {font-size: 17px;color: #FFF; font-family: var(--en-font); line-height: 100%;letter-spacing: 0.1em;}
.modal_item > div figure.head figcaption dl {display: flex; align-items: center; margin-top: 10px;}
.modal_item > div figure.head figcaption dl dt {color: #FFF;font-size: 52px; font-family: var(--en-font); line-height: 100%; letter-spacing: 0;}
.modal_item > div figure.head figcaption dl dd {font-size: 16px; color: #FFF; line-height: 140%; margin-left: 20px;}
.modal_item > div figure.head figcaption dl dd strong {font-weight: 700;}
.modal_item > div figure.head figcaption dl dd em {font-size: 14px;}

div.iv_cont {margin-top: 100px; padding: 0px 20px;}
div.iv_cont > div h3 {font-size: 16px; font-weight: 700; display: flex; align-items: center; position: relative; z-index: 1; padding: 5px 0px;}
div.iv_cont > div h3 strong {width: 32px; height: 32px; background-color: #1088D9; font-family: var(--en-font); line-height: 80%; letter-spacing: 0; color: #FFF; display: flex; align-items: center; justify-content: center; font-weight: 400; border-radius: 100%; flex-shrink: 0; padding-top: 3px; box-sizing: border-box; margin-right: 12px; margin-left: -10px;}
div.iv_cont > div h3 span {line-height: 160%; padding-right: 20px;}
div.iv_cont > div h3:after {content: ""; width: 100%; height: 100%; background-color:#ECF4FF ; position: absolute; left: 0px; top: 0px; z-index: -1;}
div.iv_cont > div h4 {margin-top: 16px; font-size: 16px; font-weight: 700; color: #1088D9;}
div.iv_cont > div h4 + p {margin-top: 10px; font-size: 14px; line-height: 160%;}
div.iv_cont > div > figure {margin-top: 16px;}
div.iv_cont > div > figure img {border-radius: 16px;}
div.iv_cont > div + div {margin-top: 34px;}

.modal_item > div > ul.link {padding: 0px 30px; margin-top: 40px;}
.modal_item > div > ul.link li a {width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 30px; background-color: #1088D9; font-size: 16px; color: #FFF; font-weight: 700; position: relative;}
.modal_item > div > ul.link li + li {margin-top: 14px;}
.modal_item > div > ul.link li + li a {background-color:#FF0033 ;}
.modal_item > div > ul.link li a:after {content: ""; width: 6px; height: 8px; background-color: #FFF; clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; right:20px; top: calc(50% - 4px); right: 20px;}

.requirement {padding: 50px 0px;}
.requirement > h2 {font-size: 24px; font-weight: 700; text-align: center;}
.requirement > p.en {text-align: center; font-size: 15px; color: #1088D9; font-family: var(--en-font); letter-spacing: 0.1em; margin-top: 6px;}
.requirement > div.cont { margin-top: 30px; padding: 0px 20px;}
.requirement > div.cont div {background-color: #FFF; border-radius: 16px; padding: 40px 20px;}
.requirement > div.cont div dl dt {border-bottom: 1px solid #D3DAE4; padding-bottom: 5px; margin-bottom: 8px;}
.requirement > div.cont div dl dd p + * {margin-top: 1em;}
.requirement > div.cont div dl dd p.no + * {margin-top: 0em;}
.requirement > div.cont div dl dd ol {list-style: outside;}
.requirement > div.cont div dl dd ol li {margin-left: 1.5em;}
.requirement > div.cont div dl dd ul li {display: flex;}
.requirement > div.cont div dl dd ul li:before {content: "■";}
.requirement > div.cont div dl + dl {margin-top: 30px;}

.flow {background-color: #1088D9; padding: 50px 0px;}
.flow > h2 {font-size: 24px; font-weight: 700; text-align: center; color: #FFF;}
.flow > p.en {text-align: center; font-size: 15px; color: #FFF; font-family: var(--en-font); letter-spacing: 0.1em; margin-top: 6px;}
.flow > p.txt {font-size: 16px; font-weight: 700; color: #FFF; text-align: center; margin-top: 10px;}
div.flow_cont {padding: 0px 20px; margin-top: 23px;}
div.flow_cont > div {display: flex; position: relative;}
div.flow_cont > div dl {width: 90px; border-radius:16px 0px 0px 16px; background-color: #ECF4FF; display: flex; flex-direction: column; align-items: center; justify-content: center;}
div.flow_cont > div div {width: calc(100% - 90px); border-radius: 0px 16px 16px 0px; background-color: #FFF; padding: 30px 20px; box-sizing: border-box;}

div.flow_cont > div dl dt {font-size: 17px;color: #1088D9; font-family: var(--en-font); line-height: 100%;letter-spacing: 0.1em;}
div.flow_cont > div dl dd {font-size: 42px;color: #1088D9; font-family: var(--en-font); line-height: 120%; letter-spacing: 0;}
div.flow_cont > div div h3 {color: #1088D9; font-size: 20px; font-weight: 700;}
div.flow_cont > div div p {font-size: 14px; font-weight: 700; line-height: 160%; margin-top: 5px;}

div.flow_cont > div + div {margin-top: 56px;}
div.flow_cont > div:after {content: ""; width: 60px; height: 24px; background-color: #D3DAE4; position: absolute; bottom: -40px; left: 0; right: 0; margin: auto;clip-path: polygon(50% 100%, 0 0, 100% 0); }
div.flow_cont > div:last-child:after {content: none;}

.flow > ul {padding: 0px 20px; margin-top: 20px;}
.flow > ul li {display: flex; color: #FFF; font-size: 14px; line-height: 180%;}
.flow > ul li:before {content: "※";}

.entry { padding: 50px 20px;}
.entry > h2 {font-size: 24px; font-weight: 700; text-align: center;}
.entry > p.en {text-align: center; font-size: 15px; color: #1088D9; font-family: var(--en-font); letter-spacing: 0.1em; margin-top: 6px;}
.entry > div.txt {margin-top: 20px;}
.entry > div.txt p {text-align: center; font-size: 16px; font-weight: 700;}
.entry > div.txt p span {color: #1088D9;}
.entry > div.txt p + p {margin-top: 1em;}

div.form {border-top: 1px solid #D3DAE4; padding-top: 30px; margin-top: 30px;}
div.form_cont dl {display: flex; font-size: 14px; flex-wrap: wrap;}
div.form_cont dl dt {width: 94px; flex-shrink: 0; font-weight: 700; margin-top: 3px;}
div.form_cont dl dd {width: calc(100% - 94px);}
div.form_cont dl dd input[type="text"],div.form_cont dl dd input[type="email"],div.form_cont dl dd input[type="tel"] {appearance: none; border: none; width: 100%; box-sizing: border-box; border-radius: 4px; padding: 10px 10px;}
div.form_cont dl.long {flex-direction: column;}
div.form_cont dl.long dt {width: 100%; margin-top: 0px;}
div.form_cont dl.long dd {width: 100%; margin-top: 5px;}
div.form_cont dl.birth dd ul {display: flex; align-items: center;}
div.form_cont dl.birth dd ul li {display: flex; width: 27%;}
div.form_cont dl.birth dd ul li p {display: flex;}
div.form_cont dl.birth dd ul li:first-child {width: 46%;}
div.form_cont dl.birth dd ul li em {margin: 0px 5px; margin-top: 3px; font-size: 14px; font-weight: 700;}
div.form_cont dl.zip dt {width: calc(94px - 1em - 5px);}
div.form_cont dl.zip dd {display: flex; width: calc(100% - 94px + 1em + 5px);}
div.form_cont dl.zip dd p {display: flex; }
div.form_cont dl.zip dd em {font-size: 14px; margin-top: 3px; font-weight: 700; margin-right: 5px;}
div.form_cont dl.zip dd + dd {display: block; width: 100%; margin-top: 16px;}
div.form_cont dl.check,div.form_cont dl.radio {flex-direction: column;}
div.form_cont dl.check dt,div.form_cont dl.radio dt {width: 100%;}
div.form_cont dl.check dd,div.form_cont dl.radio dd {margin-top: 10px; font-weight: 700; width: 100%;}
div.form_cont .wpcf7-checkbox,div.form_cont .wpcf7-radio {display: flex; justify-content: center; gap:0 16px; line-height: 100%;}
div.form_cont .wpcf7-checkbox label,div.form_cont .wpcf7-radio label {display: flex; align-items: center; cursor: pointer;}
div.form_cont .wpcf7-checkbox input,div.form_cont .wpcf7-radio input {margin: 0 5px 0 0!important;}
div.form_cont dl.area {flex-direction: column;}
div.form_cont dl.area dt {width: 100%;}
div.form_cont dl.area dd {width: 100%; margin-top: 10px;}
div.form_cont dl.area dd textarea {appearance: none; border: none; width: 100%; box-sizing: border-box; border-radius: 4px; padding: 10px 10px; height: 176px;}
div.form_cont dl + dl {margin-top: 16px;}

div.form p.pp_txt {margin-top: 24px; font-size: 14px; font-weight: 700;}
div.form div.pp {width: 100%; height: 180px; overflow-y: auto; padding: 20px; background-color: #FFF; border-radius: 4px; box-sizing: border-box; margin-top: 20px;}
div.form div.pp dl {font-size: 14px; line-height: 160%;}
div.form div.pp dl + dl {margin-top: 20px;}
div.form div.pp dl dt {font-weight: 700;}
div.form div.pp dl dd ul {list-style: outside;}
div.form div.pp dl dd ul li {margin-left: 1.5em;}

div.form p.pp_check {margin-top: 20px; text-align: center;}
div.form p.pp_check .wpcf7-checkbox .wpcf7-list-item label {display: flex; justify-content: center; flex-direction: row-reverse; font-size: 14px; font-weight: 700; align-items: center;}

div.form p.bt {margin: 30px auto 0px; width: 295px; height: 100%; position: relative; display: flex; flex-direction: column;}
div.form p.bt input {appearance: none; border: none; width: 100%; height: 60px; background-color: #FF0033; border-radius: 30px; margin: 0px auto; display: flex; align-items: center; justify-content: center; color: #FFF; font-weight: 700; cursor: pointer; font-size: 16px;}
div.form p.bt:after {content: ""; width: 6px; height: 8px; background-color: #FFF; clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; right:20px; top: calc(30px - 4px); right: 20px;}

.wpcf7-list-item {margin: 0 !important;}
.ewr .ewr-error {
  display: block;
  color: #d93025;
  font-size: 13px;
  margin-top: 5px;
}

footer {background-color: #fff; padding: 60px 0px 100px;}
footer > div {padding: 0px 40px;}
footer > div p.bt {margin-top: 20px;}
footer > div p.bt a {background-color: #505050; width: 100%; height: 60px; border-radius: 30px; margin: 0px auto; display: flex; align-items: center; justify-content: center; color: #FFF; font-weight: 700; cursor: pointer; font-size: 16px; position: relative;}
footer > div p.bt a:after {content: url(../images/footer_bt_icon.svg); position: absolute; right: 20px; top: calc(50% - 12px);}
footer p.copy {font-size: 12px; text-align: center; margin-top: 40px;}


.fadein {
-webkit-transition: opacity .8s,-webkit-transform .8s;
transition: opacity .8s,-webkit-transform .8s;
transition: opacity .8s,transform .8s;
transition: opacity .8s,transform .8s,-webkit-transform .8s;
opacity: 0
}
.fadein.scroll-end {opacity: 1;}
.fadein-bottom {-webkit-transition: opacity .8s,-webkit-transform .8s;
transition: opacity .8s,-webkit-transform .8s;
transition: opacity .8s,transform .8s;
transition: opacity .8s,transform .8s,-webkit-transform .8s;
-webkit-transform: translate(0, 30px);
transform: translate(0, 30px);
opacity: 0}
.fadein-bottom.scroll-end {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1
}
@media (max-height: 800px) {
.navi_area > div > div.navi_cont { margin-top: 20px;}
.navi_area > div > ul {margin-top: 20px;}
}
@media (max-height: 700px) {
.navi_area > div > div.navi_cont {background-color: #FFF; padding: 30px 60px; border-radius: 16px; margin-top: 20px;}

}

@media only screen and (max-width:1660px){
.page_wrap > p.copy { display: none;}
}
@media only screen and (max-width:1000px){
.navi_area {width: 398px; display: flex; align-items: center; position: fixed; top: 0; transform: none; left: 10px; height: 100%;}

.main_content header {right: 0;}

}

@media only screen and (max-width:800px){
.navi_area {display: none;}
.main_content {width: 375px; margin: 0px auto;}

.main_content header {right: 0; left: 0; margin: auto;}

}