/* ============================================================
reset
============================================================ */

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
word-break: break-all;
word-wrap: break-word;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 16px;
line-height: 1.3;
scroll-behavior: smooth;
}
body {
padding: 0;
margin: 0;
background: #fff;
color: #000;
font-family: sans-serif;
font-weight: normal;
width: 100%;
height: 100%;
min-height: 100vh;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
}
li{
list-style: none;
}
ul::before,
ul::after,
ol::before,
ol::after,
dl::before,
dl::after {
display: none;
}
img,
picture,
svg,
video {
vertical-align: bottom;
display: block;
max-width: 100%;
}
a {
color: #000;
}

/* ============================================================
root
============================================================ */

:root {
/* base */
--font_base: 'Noto Sans JP',sans-serif;
--font_en: 'Inter','Noto Sans JP',sans-serif;
--font_size_base:clamp(13px, 1.38vw, 16px);
--font_size_l_base:clamp(10px, 1.38vw, 16px);
--font_size_s_base:clamp(14px, 1.38vw, 16px);
--area_in_width:1040px;
--area_in_width:1200px;
--size_5-10:clamp(5px, 1.11vw, 10px);
--size_6-10:clamp(6px, 1.11vw, 10px);
--size_7-10:clamp(7px, 1.11vw, 10px);
--size_10-20:calc(var(--size_5-10) * 2);

/* color */
--txt_c:var(--dk_c);
--link_c:var(--main_c);
--btn_bg_c:linear-gradient(to right, var(--main_c), var(--main_dk_c));
--btn_txt_c:var(--lt_c);
--btn_corner:999px;
--btn_corner: calc(var(--size_7-10) * 0.8);
--lt_c:#FFFFFF;
--dk_c:#000000;

--base_c: #e8f4ff;
--base_lt_c: #f1f7f9;
--base_dk_c: #d1eaff;
--main_c: #015bac;
--main_lt_c: #599ed1;
--main_dk_c: #003e76;
--sub_c: #dd8185;
--sub_c2: #f5d9da;
--sub_lt_c: #fff59f;
--sub_lt_c2: #fffacb;
--sub_dk_c: #65a9ac;

--lt_rgba0_c: rgba(255,255,255,0);
--lt_rgba5_c: rgba(255,255,255,0.5);
--lt_rgba8_c: rgba(255,255,255,0.8);
--lt_rgba10_c: rgba(255,255,255,1);
--dk_rgba0_c: rgba(0,0,0,0.0);
--dk_rgba5_c: rgba(0,0,0,0.5);
--dk_rgba8_c: rgba(0,0,0,0.8);
--dk_rgba10_c: rgba(0,0,0,1);

/* rgba */

--main_dk_rgba0_c: rgba(0,60,122,0.0);
--main_dk_rgba2_c: rgba(0,60,122,0.2);
--main_dk_rgba10_c: rgba(0,60,122,1.0);

/*
--base_rgba0_c: rgba(241,239,234,0.0);
--base_lt_rgba0_c: rgba(249,248,245,0.0);
--base_dk_rgba0_c: rgba(17,86,127,0.0);
--main_rgba0_c: rgba(41,181,232,0.0);
--main_lt_rgba0_c: rgba(237,247,253,0.0);
--main_dk_rgba0_c: rgba(68,142,204,0.0);
--sub_rgba0_c: rgba(210,76,122,0.0);
--sub_lt_rgba0_c: rgba(255,131,176,0.0);
--sub_dk_rgba0_c: rgba(168,43,135,0.0);
--base_rgba8_c: rgba(241,239,234,0.8);
--base_lt_rgba8_c: rgba(249,248,245,0.8);
--base_dk_rgba8_c: rgba(17,86,127,0.8);
--main_rgba8_c: rgba(41,181,232,0.8);
--main_lt_rgba8_c: rgba(237,247,253,0.8);
--main_dk_rgba8_c: rgba(68,142,204,0.8);
--sub_rgba8_c: rgba(210,76,122,0.8);
--sub_lt_rgba8_c: rgba(255,131,176,0.8);
--sub_dk_rgba8_c: rgba(168,43,135,0.8);
--base_rgba10_c: rgba(241,239,234,1.0);
--base_lt_rgba10_c: rgba(249,248,245,1.0);
--base_dk_rgba10_c: rgba(17,86,127,1.0);
--main_rgba10_c: rgba(41,181,232,1.0);
--main_lt_rgba10_c: rgba(237,247,253,1.0);
--main_dk_rgba10_c: rgba(68,142,204,1.0);
--sub_rgba10_c: rgba(210,76,122,1.0);
--sub_lt_rgba10_c: rgba(255,131,176,1.0);
--sub_dk_rgba10_c: rgba(168,43,135,1.0);

--main_rgba5_c: rgba(41,181,232,0.8);
--main_lt_rgba5_c: rgba(237,247,253,0.5);
*/

/* case * /
--bglt_txt_c: var(--txt_c);
--bglt_link_c: var(--link_c);
--bglt_line_c: rgba(0,0,0,0.2);
--bgdk_txt_c: var(--lt_c);;
--bgdk_link_c: var(--link_c);
--bgdk_line_c: rgba(255,255,255,0.2);
/* box */
--area_space: calc(var(--size_6-10) * 5);
--area_box_space: calc(var(--size_6-10) * 6);
--box_bg_c: var(--lt_c);
--box_bgdk_c: var(--dk_c);
--box_space: calc(var(--size_7-10) * 3);
--box_gap: calc(var(--size_7-10) * 2);
--box_corner: calc(var(--size_7-10) * 1.5);
--box_shadow: 0 0 10px rgba(0, 0, 0, 0.2);
--box_shadow: 0 0 15px var(--main_dk_rgba2_c);
--box_ss_space: calc(var(--size_7-10) * 2);
--box_ss_gap: calc(var(--size_7-10) * 1);
--box_ss_corner: calc(var(--size_7-10) * 0.6);
--box_ss_shadow: 0 0 10px rgba(0, 0, 0, 0.2);
--box_ll_space: calc(var(--size_6-10) * 4);
--box_ll_gap: calc(var(--size_6-10) * 3);
--box_ll_corner: calc(var(--size_6-10) * 3);
--box_ll_shadow: 0 0 10px rgba(0, 0, 0, 0.2);
/* icon */
--cross_icon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" %3E%3Cpath d="M70.55 32.35 67.72 29.52 50.04 47.2 32.37 29.52 29.54 32.35 47.22 50.03 29.54 67.71 32.37 70.54 50.04 52.86 67.72 70.54 70.55 67.71 52.87 50.03 70.55 32.35z" fill="%23fff"  /%3E%3C/svg%3E') no-repeat center / contain;
--burger_icon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" %3E%3Cpath d="M72,32H28v-4h44v4ZM72,48H28v4h44v-4ZM72,68H28v4h44v-4Z" fill="%23ddd"  /%3E%3C/svg%3E') no-repeat center / contain;
--btn_arrow: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"%3E%3Cpath d="M34.44 24.54 37.27 21.72 62.73 47.17 65.56 50 62.73 52.83 62.73 52.83 37.27 78.28 34.44 75.46 59.9 50 34.44 24.54Z" fill="%23ffffff"  /%3E%3C/svg%3E') no-repeat center / contain;
--prev_arrow: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" %3E%3Cpath d="M65.6 24.57 62.77 21.75 37.32 47.2 34.49 50.03 37.32 52.86 37.32 52.86 62.77 78.31 65.6 75.49 40.14 50.03 65.6 24.57Z" fill="%23cccccc"  /%3E%3C/svg%3E') no-repeat center / contain;
--next_arrow: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" %3E%3Cpath d="M34.44 24.54 37.27 21.72 62.73 47.17 65.56 50 62.73 52.83 62.73 52.83 37.27 78.28 34.44 75.46 59.9 50 34.44 24.54Z" fill="%23cccccc"  /%3E%3C/svg%3E') no-repeat center / contain;
--prev_arrow_w: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" %3E%3Cpath d="M65.6 24.57 62.77 21.75 37.32 47.2 34.49 50.03 37.32 52.86 37.32 52.86 62.77 78.31 65.6 75.49 40.14 50.03 65.6 24.57Z" fill="%23fff"  /%3E%3C/svg%3E') no-repeat center / contain;
--next_arrow_w: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" %3E%3Cpath d="M34.44 24.54 37.27 21.72 62.73 47.17 65.56 50 62.73 52.83 62.73 52.83 37.27 78.28 34.44 75.46 59.9 50 34.44 24.54Z" fill="%23fff"  /%3E%3C/svg%3E') no-repeat center / contain;
--top_arrow: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" %3E%3Cpath d="M24.54 65.56 21.72 62.73 47.17 37.27 50 34.44 52.83 37.27 52.83 37.27 78.28 62.73 75.46 65.56 50 40.1 24.54 65.56Z" fill="%23000"  /%3E%3C/svg%3E') no-repeat center / contain;
--top_arrow_w: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" %3E%3Cpath d="M24.54 65.56 21.72 62.73 47.17 37.27 50 34.44 52.83 37.27 52.83 37.27 78.28 62.73 75.46 65.56 50 40.1 24.54 65.56Z" fill="%23fff"  /%3E%3C/svg%3E') no-repeat center / contain;
--check_icon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"%3E%3Cpolygon points="43.6 14.8 26 32.4 16.4 22.8 10 29.2 19.6 38.8 26 45.2 50 21.2 43.6 14.8" fill="%23015bac"/%3E%3C/svg%3E') no-repeat center / contain;

/* bg */
--gratop_lt0_lt10: linear-gradient(to top, var(--lt_rgba0) 0%, var(--lt_rgba1) 100%);
--grabottom_lt0_lt10: linear-gradient(to bottom, var(--lt_rgba0) 0%, var(--lt_rgba1) 100%);
--gratop_dk0_dk10: linear-gradient(to top, var(--dk_rgba0) 0%, var(--dk_rgba1) 100%);
--grabottom_dk0_dk10: linear-gradient(to bottom, var(--dk_rgba0) 0%, var(--dk_rgba1) 100%);
}

/* ============================================================
base
============================================================ */

/* css base */
html {
font-size: var(--font_size_base);
container-type: inline-size;
}
body {
font-family: var(--font_base);
font-size: var(--font_size_base);
background: var(--lt_c);
color: var(--txt_c);
font-weight: 500;
}
a {
color: var(--link_c);
}

/* ============================================================
bg
============================================================ * /

#wrap,
.visual_bg {
background: var(--main_c)  url("../images/visual_bg.jpg") no-repeat center top / 100% auto;
background-attachment: fixed;
}
@media screen and (max-width: 768px) {
#wrap,
.visual_bg {
background-image: url("../images/visual_bg_sp.jpg");
background-size: 100% auto;
}
}

/* ============================================================
layout
============================================================ */

/* wrap */
#wrap {
min-width: 320px;
padding-top: 80px;
overflow: hidden;
}
@media screen and (max-width: 768px) {
#wrap {
min-width: 320px;
padding-top: 60px;
}
}
#wrap .area {
position: relative;
clear: both;
display: block;
z-index: 10;
padding: var(--area_space) 0;
}
#wrap .area_in {
display: flex;
flex-flow: column;
row-gap: var(--area_space);
position: relative;
margin: 0 auto;
padding: 0 20px;
width: 100%;
max-width: var(--area_in_width);
}
.area_txt {
font-size: 1rem;
line-height: 1.6;
}
.area_txt b {
font-weight: 500;
font-size: 1.2rem;
display: inline-block;
margin-bottom: 0.3rem;
}
.pc {
display: block;
}
.sp {
display: none;
}
@media screen and (max-width: 768px) {
.pc {
display: none;
}
.sp {
display: block;
}
}

/* ============================================================
effect
============================================================ */

/* effect */
.effectdelay {
opacity: 0;
transition: 0.8s;
}
.effectdelay.effect_active {
opacity: 1;
transform: translateY(0);
}
.effect {
opacity: 0;
transition: 1.2s;
transform: translateY(70px);
}
.effect.effect_active {
opacity: 1;
transform: translateY(0);
}

/* ============================================================
header
============================================================ */

/* header */
#wrap #header {
top: 0;
left: 0;
min-width: 320px;
width: 100%;
height: 80px;
z-index: 999;
transition: 0.2s;
padding: 0;
position: fixed;
box-shadow: var(--box_shadow);
box-shadow: none;
background: var(--lt_c);
}
@media screen and (max-width: 768px) {
#wrap #header.area {
height: 60px;
}
}
#header * {
transition: 0.2s;
}
#header .area_in {
height: 100%;
max-width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
padding: 0;
}
#header .branding {
position: relative;
align-self: center;
display: flex;
padding-left: 10px;
flex: 0 1 clamp(260px, 30vw, 300px);
flex: 0 1 clamp(260px, 35vw, 500px);
}
#header .logo {
display: flex;
gap: var(--size_7-10);
}
#header .logo a {
display: flex;
height: 100%;
}
#header .logo .screen img {
width: 100%;
max-width: clamp(100px, 14.58vw, 210px);
aspect-ratio: 210 / 80;
}
#header .logo .techbymynavi img {
width: 100%;
max-width: clamp(114px, 16.66vw, 240px);
aspect-ratio: 240 / 80;
}
@media screen and (max-width: 768px) {
#header .area_in {
padding-left: 0;
padding-right: 50px;
}
}
/* ============================================================
menu
============================================================ */
/* menu */
#menubtn {
display: none;
position: absolute;
width: 50px;
height: 100%;
right: 0;
top: 0;
cursor: pointer;
transition: .3s;
background: var(--burger_icon);
z-index: 99999;
}
#menubtn.active {
background: var(--cross_icon);
}
@media screen and (max-width: 768px) {
#menubtn {
display: block;
}
}
.menu li a {
display: inline-block;
text-decoration: none;
font-weight: bold;
text-align: center;
}
@media screen and (min-width: 768px) {
#menu {
flex: 1 0 0%;
display: flex;
column-gap: calc(var(--size_7-10) * 0.8);
align-items: center;
padding: 0 20px;
}
#menu ul.menu {
flex: 1 0 0%;
display: flex;
flex-flow: row;
justify-content: flex-end;
align-items: center;
font-size: 0.9rem;
gap: calc(var(--size_7-10) * 0.8);
}
#menu ul.menu li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
color: var(--main_dk_c);
background: var(--base_lt_c);
border-radius: var(--btn_corner);
height: 50px;
padding: 5px calc(var(--size_7-10) * 1.2);
font-weight: 600;
}
#menu ul.menu li a:hover {
color: var(--main_c);
}
}
@media screen and (min-width: 1000px) and (max-width: 1300px) {
#menu ul.menu  {
font-size: 0.8rem;
}
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
#menu {
padding: 0 10px;
}
#menu ul.menu  {
font-size: 0.7rem;
}
}
@media screen and (max-width: 768px) {
#menu {
position: fixed;
left: 100%;
top: 0;
height: 100%;
width: 100%;
padding: 60px 20px 0;
transition: all 0.3s linear;
z-index: 100;
border-right: none;
height: 100%;
display: flex;
flex-flow: column nowrap;
row-gap: 20px;
background: var(--main_c);
}
#menu.active {
left: 0;
}
#menu ul.menu {
display: block;
}
#menu ul.menu li a {
display: block;
width: 100%;
height: auto;
padding: 0;
text-align: center;
padding: 10px;
color: var(--lt_c);
}
}
/* menu button */
#button .button_box > a.comp {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
padding: 5px;
font-weight: 600;
font-size: 0.9rem;
border-radius: var(--btn_corner);
}
@media screen and (min-width: 768px) {
#button {
flex: 0 1 150px;
height: 100%;
display: flex;
gap: calc(var(--box_gap) / 2);
}
#button .button_box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#button .button_box > a.comp {
transition: .3s;
background: var(--btn_bg_c);
color: var(--btn_txt_c);
}
#button .button_box > a.comp:hover {
opacity: 0.7;
}
}
@media screen and (max-width: 768px) {
#button {
flex-flow: column;
}
#button .button_box > a.comp {
background: var(--lt_c);
color: var(--main_c);
}
}
#button .button_box > a.comp.contact_end {
background: #999!important;
}
@media screen and (min-width: 1000px) and (max-width: 1300px) {
#button {
flex: 0 1 110px;
}
#button .button_box > a.comp {
font-size: 0.8rem;
}
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
#button {
flex: 0 1 80px;
}
#button .button_box > a.comp {
font-size: 0.7rem;
}
}

/* ============================================================
footer
============================================================ */

/* footer */
#wrap #footer {
background: var(--main_c);
color: var(--lt_c);
padding: 0;
}

#footer a {
color: var(--bgdk_txt_c);
}
#footer .area_in {
display: flex;
flex-flow: column;
gap: var(--box_gap);
font-size: 0.9rem;
}
.ftext {
text-align: center;
line-height: 1.6;
font-size: 0.8rem;
}
.copy {
text-align: center;
font-size: 0.8rem;
padding: var(--box_ss_space);
}

/* ============================================================
fixedui
============================================================ */

/* fixedui pagetop */
#pagetop {
position: fixed;
right: 10px;
bottom: -100px;
transition: .3s;
opacity: 0;
z-index: 100;
}
#pagetop.active {
bottom: 10px;
opacity: 0.9;
}
#pagetop:hover {
opacity: 0.6;
}
#pagetop a {
display: block;
width: calc(var(--size_7-10) * 6);
height: calc(var(--size_7-10) * 6);
border-radius: 999px;
text-indent: -9999px;
background: var(--main_c);
}
#pagetop a:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: calc(var(--size_7-10) * 4);
aspect-ratio: 1 / 1;
object-fit: cover;
transform: translate(-50%,-50%);
background: var(--top_arrow_w);
}

/* ============================================================
contact
============================================================ */

/* contact * /
#wrap .contact_area {
}
#wrap .contact_area .area_in {
gap: var(--box_gap);
}
.contact_btn_wrap {
display: flex;
flex-flow: column;
gap: var(--box_gap);
}
.contact_txt {
display: block;
text-align: center;
font-size: 0.8rem;
line-height: 1.6;
}
.contact_btn_box {
display: flex;
align-items: center;
}
/* contact btn * /
.contact_btn {
position: relative;
display: flex;
width: 100%;
max-width: 500px;
height: calc(var(--size_7-10) * 8);
border-radius: var(--btn_corner);
font-weight: 500;
font-size: 1.5rem;
margin: 0 auto;
align-items: center;
justify-content: center;
text-decoration: none;
text-align: center;
color: var(--btn_txt_c);
transition: .3s;
background: var(--btn_bg_c);
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.contact_btn span {
display: inline-block;
}
#wrap .area .contact_btn.contact_end {
background: #999;
}
@media screen and (max-width: 600px) {
.contact_btn {
width: 100%;
max-width: 100%;
height: calc(var(--size_7-10) * 8);
font-size: 1.3rem;
}
}
.contact_btn::before {
content: "";
display: block;
position: absolute;
right: 10px;
top: 50%;
width: calc(var(--size_7-10) * 4);
height: auto;
aspect-ratio: 1 / 1;
background: var(--btn_arrow);
transform: translate(0,-50%);
}
@media screen and (min-width: 768px) {
.contact_btn:not(.contact_end)::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
display: block;
background: rgba(255,255,255,0.0);
transition: .3s;
visibility: inherit;
pointer-events: none;
width: 100%;
max-width: 500px;
height: calc(var(--size_7-10) * 8);
border-radius: var(--btn_corner);
}
.contact_btn:hover::after {
background: rgba(255,255,255,0.2);
}
}
#wrap .contact_area {
padding-top: 0;
}

/* ============================================================
visual
============================================================ */

/* visual */
#wrap #visual {
padding: 0;
background: linear-gradient(to bottom, var(--base_c), var(--base_lt_c));
position: relative;
overflow: hidden;
height: 800px;
}
@media screen and (max-width: 1200px) {
#wrap #visual {
height: 60cqw;
}
}
#wrap #visual .area_in {
padding: 0;
margin: 0;
width: 50%;
width: clamp(500px, 50vw, 1200px);
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 5;
}
#wrap #visual .area_in > * {
background: url("../images/visual.png") no-repeat center center / contain;
aspect-ratio: 700 / 500;
max-width: 700px;
width: 100%;
height: auto;
margin-top: -15%;
}
.visual_new {
position: absolute;
left: 0;
bottom: 10%;
width: 45%;
display: flex;
justify-content: flex-start;
background: var(--main_c);
padding: var(--size_7-10);
border-radius: 0 calc(var(--size_7-10) * 0.8) calc(var(--size_7-10) * 0.8) 0;
line-height: 1;
font-size: 0.8rem;
box-shadow: var(--box_shadow);
z-index: 6;
padding-left: calc(max(20px, (100cqw - 1300px) / 2));
transition: .6s;

opacity: 0;
left: -9999px;
}
body.effect_active .visual_new {
opacity: 1;
left: 0;
}
.visual_new dl {
display: flex;
color: var(--lt_c);
gap: var(--size_7-10);
width: 100%;
}
.visual_new dt {
flex: 0 1 5rem;
align-self: center;
}
.visual_new dt b {
display: inline-block;
padding-right: var(--size_7-10);
border-right: 1px solid var(--lt_c);
}
.visual_new dd a {
color: var(--lt_c);
text-decoration: none;
transition: .3s;
}
.visual_new dd a:hover {
opacity: 0.7;
text-decoration: underline;
}
#visual .area_in img {
aspect-ratio: 700 / 500;
max-width: 700px;
width: 100%;
height: auto;
opacity: 0;
}
@media screen and (max-width: 768px) {
#wrap #visual {
height: auto;
}
#wrap #visual .area_in {
width: 100%;
height: auto;
aspect-ratio: 700 / 500;
display: flex;
z-index: 5;
padding-bottom: 75cqw;
}
#wrap #visual .area_in > * {
margin-top: 0;
}
#visual .area_in img {
}
.visual_new {
position: relative;
left: inherit;
bottom: inherit;
width: 100%;
display: flex;
padding: var(--size_7-10);
border-radius: 0;
line-height: 1.2;
}
.visual_new dl {
width: 100%;
}
.visual_new dt {
flex: 0 1 5rem;
align-self: center;
}
.visual_new dd {
flex: 1 0 0%;
}
}
@media screen and (min-width: 1200px) {
#wrap #visual .area_in {
}
#visual .area_in img {
}
}
@media screen and (min-width: 2000px) {
#wrap #visual .area_in {
}
#visual .area_in img {
}
}


.visual_slide{
display: flex;
position: absolute;
left: 50%;
top: 0;
max-width: 690px;
width: 50%;
height: 100%;
overflow: hidden;
z-index: 1;
}
@media screen and (max-width: 1000px) {
.visual_slide{
left: inherit;
right: 0;
width: calc(100cqw - 500px);
}
}
.visual_slide > * {
position: relative;
align-self: flex-start;
display: block;
flex: 0 1 33.33%;
width: 100%;
aspect-ratio: 230 / 1100;
}
.visual_slide > *::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 200%;
left: 0;
top: 0;
background: url(../images/visual_item01.png) repeat-y center 0 / contain;
}
@keyframes scroll-bg-y {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@keyframes scroll-bg-y-r {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.visual_slide > *:nth-child(1)::before {
background-image: url(../images/visual_item01.png);
animation: scroll-bg-y 25s linear infinite;
}
.visual_slide > *:nth-child(2)::before {
background-image: url(../images/visual_item02.png);
animation: scroll-bg-y-r 25s linear infinite;
}
.visual_slide > *:nth-child(3)::before {
background-image: url(../images/visual_item03.png);
animation: scroll-bg-y 25s linear infinite;
}
@keyframes scroll-bg-x {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes scroll-bg-x-r {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
@media screen and (max-width: 768px) {
.visual_slide{
left: 0;
top: inherit;
bottom: 0;
max-width: 100%;
width: 100%;
height: 75cqw;
display: block;
}
.visual_slide > * {
display: block;
width: 100%;
aspect-ratio: 1100 / 230;
}
.visual_slide > *::before {
content: "";
position: absolute;
display: block;
width: 200%;
height: 100%;
left: 0;
top: 0;
background: url(../images/visual_item01_sp.png) repeat-x center 0 / contain;
}

.visual_slide > *:nth-child(1)::before {
background-image: url(../images/visual_item01_sp.png);
animation: scroll-bg-x 25s linear infinite;
}
.visual_slide > *:nth-child(2)::before {
background-image: url(../images/visual_item02_sp.png);
animation: scroll-bg-x-r 25s linear infinite;
}
.visual_slide > *:nth-child(3)::before {
background-image: url(../images/visual_item03_sp.png);
animation: scroll-bg-x 25s linear infinite;
}

}

/* ============================================================
popup
============================================================ */

/* popup */
.popup_contents {
display: none;
}
.popup_contents.active {
display: flex;
position: fixed;
inset: 0;
z-index: 100000;
width: 100vw;
height: 100dvh;
padding: 50px;
background: rgba(0,0,0,.9);
align-items: center;
justify-content: center;
overflow-y: auto;
cursor: pointer;
}
.popup_contents::before {
content: "";
display: block;
width: 50px;
height: auto;
aspect-ratio: 1 / 1;
position: absolute;
right: 0;
top: 0;
background: var(--cross_icon);
z-index: 1111;
}
@media screen and (max-width: 768px) {
.popup_contents::before {
width: 30px;
right: -5px;
top: -5px;
}
}
.popup_contents.active .popup_box {
display: flex;
align-items: center;
justify-content: center;
width: min(100%, 1000px);
height: auto;
height: 100%;
max-height: 100%;
}
.popup_box_in {
width: 100%;
display: flex;
flex-flow: column;
width: 100%;
/*max-width: 900px;*/
max-height: calc(100dvh - 100px);
margin: 0 auto;
font-weight: 400;
gap: var(--box_gap);
background: var(--lt_c);
box-shadow: var(--box_shadow);
padding: var(--box_space);
color: var(--bglt_txt_c);
cursor: default;
border-radius: var(--box_ll_corner);
}
.popup_box_in .a_box {
background: var(--base_c);
border-radius: var(--box_corner);
width: 100%;
height: 100%;
padding: var(--box_space);
overflow-y: auto;
}

body.modal_open {
overflow: hidden;
}
.pop_prev,
.pop_next {
position: fixed;
top: 50%;
z-index: 100001;
display: block;
width: 50px;
height: auto;
aspect-ratio: 1 / 1;
cursor: pointer;
text-indent: -9999px;
transition: .3s;
}
.photolist .pop_prev,
.photolist .pop_next,
.program:not(.popup_box) .pop_prev,
.program:not(.popup_box) .pop_next {
display: none;
}
.pop_prev {
left: 10px;
background: var(--prev_arrow_w);
}
.pop_next {
right: 10px;
background: var(--next_arrow_w);
}
.pop_prev:hover,
.pop_next:hover {
opacity: .7;
}
@media screen and (max-width: 768px) {
.popup_contents.active {
padding: 20px;
align-items: flex-start;
align-items: center;
overflow: hidden;
}
.popup_contents.active .popup_box {
width: 100%;
max-height: none;
}
.popup_box_in {
max-height: calc(100dvh - 40px);
}
.pop_prev {
left: 0;
width: 40px;
transform: translate(-25%, 0);  }
.pop_next {
right: 0;
width: 40px;
transform: translate(25%, 0);
}
}
.popup_contents.active .popup_box {
height: auto;
}
.popup_box.program .layout {
flex: 1 0 100%;
}
.popup_box.program .button {
display: none;
}
.popup_box.program .photo.ll {
}
.photolist .popup_box_btn,
.program:not(.popup_box) .popup_box_btn {
display: none;
}
.popup_box
.popup_box_btn {
display: flex;
justify-content: center;
}
.popup_box_btn > * {
color: var(--btn_txt_c);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
font-weight: 500;
font-size: 1.1rem;
max-width: 260px;
transition: 0.3s;
background: var(--btn_bg_c);
text-decoration: none;
padding: 5px;
border-radius: 999px;
}


/* ============================================================
free
============================================================ */

/* survey */
#survey_area {}
#survey_area .area_in {}
#survey_area .effect {}

.survey_lead {
display: flex;
flex-flow: column;
gap: var(--box_space);
text-align: center;
}
.survey_lead .label {
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
border-radius: calc(var(--size_7-10) * 0.8);
height: calc(var(--size_7-10) * 4.5);
position: relative;
padding: var(--box_ss_space);
background: var(--sub_lt_c);
color: var(--main_dk_c);
font-weight: 600;
}
.survey_lead .label::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid var(--sub_lt_c);
position: absolute;
top: 99%;
left: 50%;
transform: translate(-50%,0);
}
.survey_lead .tit {
font-weight: 700;
font-size: 2rem;
color: var(--main_dk_c);
}
@media(max-width: 500px) {
.survey_lead .tit {
font-size: 1.5rem;
}
}
.survey_lead .image {
text-align: center;
}
.survey_lead .image img {
margin: 0 auto;
}
@media(max-width: 767px) {
.survey_lead .image {
background: url(../images/survey_item01_sp.png) no-repeat center / contain;
aspect-ratio: 600 / 250;
width: 100%;
max-width: 600px;
}
.survey_lead .image img {
opacity: 0;
}
}
.survey_lead .txt {
}
.survey_box_wrap {
display: flex;
flex-flow: column;
gap: var(--box_gap);
}
.survey_box {
position: relative;
display: flex;
flex-flow: column;
gap: var(--box_ll_gap);
padding: var(--box_ll_space);
border-radius: var(--box_corner);
background: linear-gradient(to right, var(--base_c), var(--base_lt_c));
}
.survey_box .num {
position: absolute;
left: var(--box_ss_space);
top: var(--box_ss_space);
display: flex;
width: calc(var(--size_7-10) * 8);
height: calc(var(--size_7-10) * 8);
margin-right: auto;
border-radius: calc(var(--box_corner) * 0.8);
align-items: center;
justify-content: center;
background: var(--main_c);
color: var(--lt_c);
font-family: var(--font_en);
font-weight: 600;
font-size: 1.5rem;
}
.survey_box .tit_wrap {
display: flex;
flex-flow: column;
gap: var(--box_ss_gap);
text-align: center;
padding-left: calc(var(--size_7-10) * 8);
}
.survey_box .tit_wrap .tit {
font-weight: 700;
font-size: 2rem;
color: var(--main_dk_c);
}
@media(max-width: 500px) {
.survey_box .tit_wrap .tit {
font-size: 1.5rem;
}
}
.survey_box .tit_wrap .txt {
}
.survey_list {
display: flex;
flex-flow: row wrap;
gap: var(--box_gap);
justify-content: center;
margin: 0 auto;
width: 100%;
}
.survey_list li {
background: var(--lt_c);
box-shadow: var(--box_shadow);
border-radius: calc(var(--box_corner) * 0.8);
}
.survey_list li label {
display: block;
border-radius: calc(var(--box_corner) * 0.8);
padding: calc(var(--box_ss_space) / 2) calc(var(--box_ss_space) / 2) var(--box_ss_space);
width: 100%;
height: 100%;
cursor: pointer;
transition: .3s;
}
.survey_list li label:hover {
background: var(--sub_lt_c2);
opacity: 0.7;
}
.survey_list input {
position: absolute;
opacity: 0;
}
.survey_list li:has(input:checked) {
outline: calc(var(--size_7-10) * 0.3) solid var(--main_lt_c);
background: var(--sub_lt_c2);
}
.survey_box.q1 .survey_list {
max-width: 880px;
}
.survey_box.q1 .survey_list li {
flex: 0 1 calc(20% - (var(--box_gap) * 4 / 5));
}
.survey_box.q2 .survey_list {
max-width: 940px;
}
.survey_box.q2 .survey_list li {
flex: 0 1 calc(33.33% - (var(--box_gap) * 2 / 3));
}
.survey_box.q3 .survey_list {
max-width: 880px;
}
.survey_box.q3 .survey_list li {
flex: 0 1 calc(25% - (var(--box_gap) * 3 / 4));
}
.survey_box.q4 .survey_list {
max-width: 940px;
}
.survey_box.q4 .survey_list li {
flex: 0 1 calc(33.33% - (var(--box_gap) * 2 / 3));
}
.survey_list .image {
}
.survey_list .image img {
margin: 0 auto;
}
.survey_list .txt {
text-align: center;
font-weight: 600;
color: var(--main_dk_c);
}
.survey_list .txt span {
color: var(--sub_c);
display: inline-block;
margin-right: 0.2rem;
}
.survey_list .txt b {
letter-spacing: 0.05rem;
}
.survey_box .btn_wrap {
display: flex;
justify-content: center;
}
.survey_box .btn_wrap .btn {
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--size_7-10) * 20);
height: calc(var(--size_7-10) * 6);
background: var(--sub_c);
color: var(--lt_c);
border-radius: 999px;
box-shadow: var(--box_shadow);
transition: .3s;
cursor: pointer;
}
.survey_box .btn_wrap .btn:hover {
opacity: 0.7;
}
.program_popup {}
@media(max-width: 767px) {
.survey_box.q1 .survey_list li,
.survey_box.q2 .survey_list li,
.survey_box.q3 .survey_list li,
.survey_box.q4 .survey_list li {
flex: 0 1 100%;
display: flex;
justify-content: center;
align-items: center;
padding: calc(var(--box_ss_space) / 2);
}
.survey_list .image {
flex: 0 1 calc(var(--size_7-10) * 10);
}
.survey_list .txt {
flex: 1 0 0%;
justify-self: flex-start;
text-align: left;
}
.survey_list .txt br {
display: none;
}
}
@media(max-width: 500px) {
.survey_box.q1 .survey_list li,
.survey_box.q3 .survey_list li {
flex: 0 1 100%;
}
.survey_box .num {
position: relative;
left: inherit;
top: inherit;
display: flex;
height: auto;
margin: 0 auto;
padding: calc(var(--size_7-10) * 0.5);
}
.survey_box .tit_wrap {
padding: 0;
}
}
.survey_summary {
display: flex;
flex-flow: column;
gap: var(--box_ll_gap);
}
.survey_summary .layout {
display: flex;
flex-flow: row wrap;
align-items: center;
max-width: 1000px;
margin: 0 auto;
gap: calc(var(--size_7-10) * 8);
}
.survey_summary .info {
flex: 1 0 0%;
display: flex;
flex-flow: column;
gap: var(--box_gap);
}
.survey_summary .tit {
font-weight: 700;
font-size: 2rem;
color: var(--main_dk_c);
}
@media(max-width: 500px) {
.survey_summary .tit {
font-size: 1.5rem;
}
}
.survey_summary .info .txt {
line-height: 1.6;
}
.survey_summary .list {
display: flex;
flex-flow: column;
gap: calc(var(--size_7-10) * 0.8);
}
.survey_summary .list li {
background: var(--base_c);
color: var(--main_dk_c);
font-weight: 600;
padding: var(--size_7-10);
border-radius: calc(var(--size_7-10) * 1);
display: flex;
align-items: center;
gap: var(--size_7-10);
}
.survey_summary .list li::before {
content: "";
display: inline-block;
width: 1.2rem;
height: 1.2rem;
flex: 0 1 1.2rem;
background: var(--check_icon);
}
.survey_summary .list li span {
flex: 1 0 0%;
}
.survey_summary .image {
flex: 0 1 calc(--size_7-10) * 42;
flex: 0 1 42%;
}
.survey_summary .image img {
margin: 0 auto;
}
.survey_summary > .txt {
text-align: center;
line-height: 1.6;
}
.survey_summary > .txt b {
display: inline-block;
margin-top: 0.5rem;
font-weight: 700;
font-size: 1.5rem;
color: var(--main_dk_c);
}
.survey_summary .marker {
position: relative;
background: linear-gradient( transparent 65%, var(--sub_lt_c) 65%);
}
@media(max-width: 767px) {
.survey_summary .tit {
text-align: center;
}
.survey_summary .layout {
gap: 0;
}
.survey_summary .layout > * {
flex: 1 0 100%;
}
.survey_summary .image img {
max-width: 60%;
}
.survey_summary > .txt b br {
display: none;
}
}
@media(max-width: 500px) {
.survey_box .btn_wrap .btn {
width: 100%;
}
}
/* survey end */

/* process */
#wrap #process_area {
background: linear-gradient(to right, var(--base_dk_c), var(--base_c));
padding-top: 0;
margin-top: var(--area_box_space);
}
#process_area .area_in {}
#process_area .effect {}

.process_lead {
display: flex;
flex-flow: column;
align-items: center;
gap: var(--box_gap);
}
.process_lead .label {
transform: translate(0,-50%);
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
border-radius: calc(var(--size_7-10) * 0.8);
height: calc(var(--size_7-10) * 4.5);
position: relative;
padding: var(--box_ss_space);
background: var(--main_c);
color: var(--lt_c);
font-weight: 600;
}
.process_lead .tit {
font-weight: 700;
font-size: 2rem;
color: var(--main_dk_c);
}
@media(max-width: 500px) {
.process_lead .tit {
font-size: 1.5rem;
}
}
.process_list {
display: flex;
flex-flow: row wrap;
gap: var(--box_gap);
justify-content: center;
margin: 0 auto;
width: 100%;
}
.process_list li {
flex: 0 1 calc(20% - (var(--box_gap) * 4 / 5));
position: relative;
background: var(--lt_c);
box-shadow: var(--box_shadow);
border-radius: calc(var(--box_corner) * 0.8);
padding: calc(var(--box_ss_space) / 2) calc(var(--box_ss_space) / 2) var(--box_ss_space);
}
.process_list li .image img {
margin: 0 auto;
}
.process_list li:not(:last-child)::before {
display: block;
content: "";
width: calc(var(--size_7-10) * 4);
aspect-ratio: 1 / 1;
background: url(../images/flow_arrow.png) no-repeat center / contain;
position: absolute;
left: 100%;
top: 50%;
transform: translate(-30%,-50%);
z-index: 2;
}
.process_list .label {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,-50%);
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
border-radius: calc(var(--size_7-10) * 0.8);
height: calc(var(--size_7-10) * 3);
padding: 0 var(--box_ss_space);
background: var(--main_lt_c);
color: var(--lt_c);
font-weight: 600;
width:260px ;
z-index: 2;
font-size: 0.8rem;
}
.process_list .label::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid var(--main_lt_c);
position: absolute;
top: 99%;
left: 50%;
transform: translate(-50%,0);
}
.process_list .image {}
.process_list .image img {}
.process_list .txt {
text-align: center;
font-weight: 600;
color: var(--main_dk_c);
}
.process_list .txt span {
color: var(--sub_dk_c);
display: inline-block;
margin-right: 0.2rem;
}
.process_list .txt b {
letter-spacing: 0.05rem;
}
.process_summary {
display: flex;
flex-flow: column;
gap: var(--box_gap);
text-align: center;
}
.process_summary .txt {
}
.process_summary .txt b {
display: inline-block;
margin-top: 0.5rem;
font-weight: 700;
font-size: 2rem;
color: var(--main_dk_c);
}
@media(max-width: 500px) {
.process_summary .txt b {
font-size: 1.5rem;
}
}

@media(max-width: 767px) {
.process_list {
flex-flow: column;
gap: var(--box_gap);
}
.process_list li {
padding: calc(var(--box_ss_space) / 2);
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.process_list .image {
flex: 0 1 calc(var(--size_7-10 ) * 10);
}
.process_list .txt {
flex: 1 0 0%;
text-align: left;
}
.process_list li:not(:last-child)::before {
left: inherit;
right: 10%;
top: inherit;
bottom: calc(var(--size_7-10) * -3);
transform: translate(0%, 0%) rotate(90deg);
}
.process_list .label {
position: relative;
left: 0;
top: 0;
flex: 1 0 100%;
transform: translate(0%,0%);
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
border-radius: calc(var(--size_7-10) * 0.8);
height: calc(var(--size_7-10) * 3);
padding: 0 var(--box_ss_space);
background: var(--main_lt_c);
color: var(--lt_c);
font-weight: 600;
width:260px ;
z-index: 2;
font-size: 0.8rem;
}
.process_list .label::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid var(--main_lt_c);
position: absolute;
top: 99%;
left: 50%;
transform: translate(-50%,0);
}

}
/* process end */

/* about */
#about_area {
position: relative;
background: var(--main_c) url(../images/about_bg.jpg) no-repeat right top / 50% auto;
}
#about_area::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #dceeff;
position: absolute;
top: -1px;
left: 50%;
transform: translate(-50%,0);
}
#about_area .area_in {
max-width: inherit;
padding: 0;
}
#about_area .effect {}

.about_lead {
color: var(--lt_c);
display: flex;
flex-flow: column;
gap: var(--box_gap);
max-width: var(--area_in_width);
margin: 0 auto;
width: 100%;
padding: 0 var(--box_space);
}
.about_lead .tit {
display: inline-block;
margin-top: 0.5rem;
font-weight: 700;
font-size: 2rem;
}
@media(max-width: 500px) {
.about_lead .tit {
font-size: 1.5rem;
}
}
.about_lead .txt {
line-height: 1.8;
max-width: 600px;
}
.about_box_wrap {
display: flex;
flex-flow: column;
gap: var(--box_ll_space);
margin: 0 auto;
width: 100%;
}
.about_box {
position: relative;
border-radius: var(--box_corner);
background: var(--lt_c);
display: flex;
flex-flow: column;
gap: var(--box_gap);
padding: var(--box_space);
}
.about_box > .tit {
display: inline-block;
margin-bottom: 0.5rem;
font-weight: 700;
font-size: 1.5rem;
color: var(--main_dk_c);
}
.about_box .tit small {
font-size: 1rem;
}
.about_box .list .tit {
background: var(--sub_dk_c);
color: var(--lt_c);
text-align: center;
border-radius: calc(var(--box_corner) * 0.5);
padding: calc(var(--size_7-10) / 2);
}
.about_box .list .image {
}
.about_box .list .image img {
margin: 0 auto;
}
.about_box_wrap .about_box  > .image {
position: absolute;
}
.about_box_wrap .about_box  > .image img {
max-width: inherit;
}
.about_box_wrap.share {
max-width: var(--area_in_width);
}
.about_box_wrap.share .about_box {
max-width: 720px;
border-radius: 0;
}
.about_box_wrap.share .about_box::after {
content: "";
display: block;
border-radius: 0 var(--box_corner) var(--box_corner) 0;
position: absolute;
top: 0;
left: calc(100% - 1px);
width: calc(var(--size_7-10) * 6);
height: 100%;
background: var(--lt_c);
z-index: -1;
}
.about_box_wrap.share .about_box::before {
content: "";
display: block;
width: calc(0% + 1px + max(0px, (100cqw - var(--area_in_width)) / 2));
height: 100%;
background: var(--lt_c);
position: absolute;
right: calc(100% - 1px);
top: 0;
z-index: -1;
}
.about_box_wrap.share .about_box  > .image {
left: 95%;
bottom: 0;
}
.about_box_wrap.share .about_box  > .image img {
}
.about_box_wrap.share .about_box  > .txt {
text-align: right;
}
.about_box_wrap.share .about_box  .list {
display: flex;
gap: var(--box_gap);
}
.about_box_wrap.share .about_box  .list li {
background: var(--base_c);
border-radius: var(--box_corner);
padding: calc(var(--size_7-10) / 1);
display: flex;
flex-flow: column;
gap: calc(var(--size_7-10) / 1);
}
@media(max-width: 767px) {
.about_box_wrap.share {
padding: 0 var(--box_space);
}
.about_box_wrap.share .about_box {
border-radius: var(--box_corner);
}
.about_box_wrap.share .about_box::after {
display: none;
}
.about_box_wrap.share .about_box::before {
display: none;
}
.about_box_wrap.share .about_box  > .image {
position: relative;
left: inherit;
bottom: inherit;
}
.about_box_wrap.share .about_box  > .image img {
margin: 0 auto;
max-width: 60%;
}
.about_box_wrap.share .about_box  .list {
flex-flow: row wrap;
justify-content: center;
}
.about_box_wrap.share .about_box  .list li {
flex: 0 1 calc(50% - (var(--box_gap) * 1 / 2));
}
}
@media(max-width: 500px) {
.about_box_wrap.share .about_box  .list li {
flex: 0 1 100%;
}
}
.about_box_wrap.global {
max-width: 1600px;
padding-left: 20%;
}
.about_box_wrap.global .about_box {
background: var(--base_c);
border-radius: var(--box_corner) 0 0 var(--box_corner);
}
.about_box_wrap.global .about_box::before {
content: "";
display: block;
width: calc(0% + 1px + max(0px, (100cqw - 1600px) / 2));
height: 100%;
background: var(--base_c);
position: absolute;
left: calc(100% - 1px);
top: 0;
z-index: -1;
}
.about_box_wrap.global .about_box .list {
display: flex;
flex-flow: row wrap;
gap: var(--box_gap);
}
.about_box_wrap.global .about_box .list > * {
flex: 0 1 calc(25% - (var(--box_gap) * 3 / 4));
background: var(--lt_c);
box-shadow: var(--box_shadow);
border-radius: calc(var(--box_corner) * 0.8);
padding: calc(var(--box_ss_space) / 2) calc(var(--box_ss_space) / 2) var(--box_ss_space);
}
.about_box .txt {}
.about_box_wrap.global .about_box  > .image {
right: 95%;
bottom: 0;
}
.about_box_wrap.global .about_box  > .image img {
}
@media(max-width: 767px) {
.about_box_wrap.global {
padding: 0 var(--box_space);
}
.about_box_wrap.global .about_box {
border-radius: var(--box_corner);
padding-bottom: 0;
}
.about_box_wrap.global .about_box::before {
display: none;
}
.about_box_wrap.global .about_box .list > * {
flex: 0 1 calc(50% - (var(--box_gap) * 1 / 2));
padding: calc(var(--box_ss_space) / 2);
}
.about_box .txt {}
.about_box_wrap.global .about_box  > .image {
position: relative;
right: inherit;
bottom: inherit;
}
.about_box_wrap.global .about_box  > .image img {
margin: 0 auto;
max-width: 60%;
}
}
@media(max-width: 500px) {
.about_box_wrap.global .about_box .list > * {
flex: 0 1 100%;
}
.about_box .list .image img {
max-width: 120px;
margin: 0 auto;
}
}

/* about end */

/* articles */
#articles_area {}
#articles_area .area_in {}
#articles_area .effect {}

.articles_lead {
display: flex;
flex-flow: column;
align-items: center;
gap: var(--box_space);
}
.articles_lead .label {
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
border-radius: calc(var(--size_7-10) * 0.8);
height: calc(var(--size_7-10) * 4.5);
position: relative;
padding: var(--box_ss_space);
background: var(--sub_lt_c);
color: var(--main_dk_c);
font-weight: 600;
}
.articles_lead .label::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid var(--sub_lt_c);
position: absolute;
top: 99%;
left: 50%;
transform: translate(-50%,0);
}
.articles_lead .tit {
font-weight: 700;
font-size: 2rem;
color: var(--main_dk_c);
text-align: center;
}
.articles_lead .tit .icon {
display: inline-block;
flex: 0 1 calc(var(--size_7-10) * 12);
align-items: center;
justify-content: center;
font-weight: 600;
background: var(--main_dk_c);
color: var(--lt_c);
border-radius: calc(var(--size_7-10) * 0.8);
font-size: 1.3rem;
padding: calc(var(--size_7-10) * 0.5) var(--size_7-10);
letter-spacing: 0.1rem;
margin-right: 0.5rem;
vertical-align: top;
}
.articles_lead .tit b {
font-weight: 700;
flex: 1 0 auto;
}
.articles_list {
display: flex;
flex-flow: row wrap;
gap: var(--box_ll_gap);
justify-content: center;
max-width: 1100px;
margin: 0 auto;
}
.articles_list li {
flex: 0 1 calc(33.33% - (var(--box_ll_gap) * 2 / 3));
}
.articles_list li > .link,
.articles_list li > .camingsoon {
display: flex;
flex-flow: column;
background: var(--base_c);
border-radius: var(--box_corner);
overflow: hidden;
box-shadow: var(--box_shadow);
max-width: 340px;
margin: 0 auto;
height: 100%;
text-decoration: none;
transition: .3s;
}
.articles_list li > .link:hover {
opacity: 0.7;
}
.articles_list li > .link .image {}
.articles_list li > .link .image img {}
.articles_list li > .link .info {
padding: var(--box_space);
display: flex;
flex-flow: column;
gap: var(--box_ss_gap);
height: 100%;
}
.articles_list li > .link .tit {
flex: 0 1 auto;
font-size: 1.2rem;
line-height: 1.4;
color: var(--main_dk_c);
}
.articles_list li > .link .txt {
flex: 1 0 0%;
color: var(--dk_c);
line-height: 1.6;
}
.articles_list li > .link .btn {
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.articles_list li > .link .btn span {
display: flex;
align-items: center;
justify-content: center;
height: calc(var(--size_7-10) * 3.5);
padding: 0 calc(var(--size_7-10) * 2);
font-weight: 600;
font-size: 0.9rem;
border-radius: 999px;
background: var(--btn_bg_c);
color: var(--lt_c);
}
.articles_list li > .camingsoon {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.camingsoon .image {}
.camingsoon .image img {}
@media(max-width: 767px) {
.articles_list li {
flex: 0 1 calc(50% - (var(--box_ll_gap) * 1 / 2));
}
}
@media(max-width: 500px) {
.articles_list li {
flex: 0 1 100%;
}
}
/* articles end */

/* comment */
#comment_area {}
#comment_area .area_in {}
#comment_area .effect {}

.comment_box {
display: flex;
flex-flow: row wrap;
gap: var(--box_ll_gap);
}
.comment_box .image {
flex: 0 1 calc(var(--size_7-10) * 20);
}
.comment_box .image img {
border-radius: var(--box_corner);
box-shadow: var(--box_shadow);
}
.comment_box .info {
flex: 1 0 0%;
gap: var(--box_gap);
}
.comment_box .tit {
color: var(--main_dk_c);
}
.comment_box .tit b {
font-weight: 700;
font-size: 1.5rem;
}
.comment_box .txt {
line-height: 1.8;
}
@media(max-width: 767px) {
.comment_box .info {
display: flex;
flex-flow: column;
gap: var(--box_gap);
}
.comment_box .image {
display: none;
}
.comment_box .tit {
display: flex;
gap: var(--box_gap);
align-items: center;
}
.comment_box .tit::before {
content: "";
display: block;
flex: 0 1 calc(var(--size_7-10) * 15);
width: calc(var(--size_7-10) * 15);
aspect-ratio: 1 / 1;
background: url(../images/comment_item01.jpg) no-repeat center / contain;
border-radius: var(--box_corner);
box-shadow: var(--box_shadow);
}
.comment_box .tit b {
flex: 1 0 0%;
}
.comment_box .txt {
flex: 1 0 100%;
}
}

/* comment end */

/* recruit */
#recruit_area {
background: linear-gradient(to right, var(--base_dk_c), var(--base_c));
}
#recruit_area .area_in {
max-width: 1010px;
}
#recruit_area .effect {}

.recruit_lead {
}
.recruit_lead .tit {
color: var(--main_dk_c);
font-weight: 700;
font-size: 1.5rem;
}
.recruit_box_wrap {
display: flex;
flex-flow: row wrap;
gap: var(--box_gap);
margin: 0 auto;
}
.recruit_box {
flex: 0 1 calc(33.33% - (var(--box_gap) * 2 / 3));
max-width: 310px;
border-radius: var(--box_corner);
box-shadow: var(--box_shadow);
background: var(--lt_c);
}
.recruit_box .image {}
.recruit_box .image img {
margin: 0 auto;
}
.recruit_box .image img {
transform: translate(0,calc(var(--box_gap) * -1));
}
.recruit_box .btn_wrap {
padding: 0 var(--box_space);
}
.recruit_box .btn {
transform: translate(0,calc(var(--box_gap) * -1));
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
padding: 5px;
font-weight: 600;
font-size: 1rem;
border-radius: var(--btn_corner);
background: var(--btn_bg_c);
color: var(--btn_txt_c);
transition: .3s;
}
.recruit_box:first-child {
background: #005fae;
}
.recruit_box:first-child .btn {
background: var(--lt_c);
color: var(--main_dk_c);
border: 2px solid var(--main_dk_c);
}

.recruit_box a {
text-decoration: none;
}
.recruit_box a:hover .btn {
opacity: 0.7;
}
.contact_box {
border-radius: var(--box_corner);
box-shadow: var(--box_shadow);
background: var(--lt_c);
overflow: hidden;
}
.contact_box a {
display: flex;
text-decoration: none;
}
.contact_box a:hover .btn {
opacity: 0.7;
}
.contact_box .tit {
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--main_c);
font-size: 1.5rem;
padding: var(--box_space);
}
.contact_box .tit b {
font-weight: 600;
display: inline-block;
padding-right: 1rem;
border-right: 1px solid var(--main_c);
line-height: 1;
}
.contact_box .image {
flex: 1 0 0%;
display: flex;
align-items: center;
justify-content: center;
}
.contact_box .image img {
margin: 0 auto;
}
.contact_box .btn_wrap {
padding: var(--box_space);
flex: 0 1 310px;
}
.contact_box .btn {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
padding: 5px;
font-weight: 600;
font-size: 1rem;
border-radius: var(--btn_corner);
background: var(--btn_bg_c);
color: var(--btn_txt_c);
transition: .3s;
}
@media(max-width: 768px) {
.recruit_box_wrap {
justify-content: center;
align-items: center;
}
.recruit_box {
flex: 0 1 calc(50% - (var(--box_gap) * 1 / 2));
}
}
@media(max-width: 500px) {
.recruit_box {
padding-top: 0;
flex: 0 1 100%;
max-width: 100%;
}
.recruit_box .image img {
max-width: 70%;
}
.recruit_box .btn_wrap {
padding-top: 0;
}
.contact_box a {
flex-flow: column;
}
.contact_box .tit {
padding-bottom: 0;
}
.contact_box .tit b {
border: none;
}
.contact_box .image img {
max-width: 60%;
}
.contact_box .btn_wrap {
padding-top: 0;
flex: 1 0 0%;
}
}
/* recruit end */




.popup_contents .a_box {
display: flex;
flex-flow: column;
gap: var(--box_gap);
}
.popup_contents .a_box > .tit {
display: flex;
gap: var(--box_gap);
align-items: center;
padding: calc(var(--box_space) * 0.5);
background: var(--lt_c);
border-radius: var(--box_corner);
}
.popup_contents .a_box > .tit span {
display: flex;
width: calc(var(--size_7-10) * 8);
width: auto;
padding: 0 var(--box_space);
height: calc(var(--size_7-10) * 6);
border-radius: calc(var(--box_corner) * 0.8);
align-items: center;
justify-content: center;
background: var(--main_c);
color: var(--lt_c);
font-family: var(--font_en);
font-weight: 600;
font-size: 1.5rem;
}
.popup_contents .a_box > .tit b {
flex: 1 0 0%;
font-weight: 700;
font-size: 2rem;
color: var(--main_dk_c);
}
.popup_contents .a_box .layout {
display: flex;
flex-flow: row wrap;
gap: var(--box_gap);
}
.popup_contents .a_box .layout .data {
flex: 0 1 50%;
padding: calc(var(--box_space) * 0.5);
background: var(--lt_c);
border-radius: var(--box_corner);
display: flex;
flex-flow: column;
gap: 3px;
}
.popup_contents .a_box .layout .data .bar {
display: block;
background: var(--main_c);
color: var(--lt_c);
padding: calc(var(--box_space) * 0.3) calc(var(--box_space) * 0.5);
border-radius: var(--box_ss_corner);
font-size: 0.9rem;
text-align: center;
font-weight: 600;
line-height: 1;
}
.popup_contents .a_box .layout .data .ans {
display: block;
background: var(--sub_c2);
color: var(--main_dk_c);
padding: calc(var(--box_space) * 0.5);
border-radius: var(--box_ss_corner);
font-size: 1.1rem;
text-align: center;
font-weight: 600;
}
.popup_contents .a_box .layout .data .image img {
margin: 0 auto;
}
.popup_contents .a_box .layout .info {
flex: 1 0 0%;
display: flex;
flex-flow: column;
gap: var(--box_gap);
}
.popup_contents .a_box .layout .info .tit {
color: var(--main_dk_c);
font-weight: 600;
font-size: 1.5rem;
}
.popup_contents .a_box .layout .info .txt {
line-height: 1.6;
}
.popup_contents .a_box .layout .info .txt b {
color: var(--main_dk_c);
}
@media(max-width: 768px) {
.popup_contents .a_box .layout .data {
flex: 0 1 100%;
}
}
.popup_contents .a_box .btn_wrap {
padding-top: var(--box_space);
display: flex;
justify-content: center;
}
.popup_contents .a_box .popup_close.btn {
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--size_7-10) * 15);
height: calc(var(--size_7-10) * 4);
background: var(--main_lt_c);
color: var(--lt_c);
border-radius: 999px;
box-shadow: var(--box_shadow);
transition: .3s;
cursor: pointer;
}
.popup_contents .a_box .popup_close.btn:hover {
opacity: 0.7;
}

.popup_box.incorrect .a_box,
.popup_box.incorrect .a_box .layout .data .ans {
background: #eee;
}
.popup_box.incorrect .a_box > .tit span,
.popup_box.incorrect .a_box .layout .data .bar {
background: #666;
}
.popup_box.incorrect .a_box > .tit b,
.popup_box.incorrect .a_box .layout .data .ans,
.popup_box.incorrect .a_box .layout .info .txt b,
.popup_box.incorrect .a_box .layout .info .tit {
color: #666;
}

/* layout_list */
.layout_list {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: var(--box_gap);
}
.layout_list > *.item {
flex: 0 1 calc(33.33% - (var(--box_gap) * 2 / 3));
background: var(--base_c);
}
@media screen and (max-width: 768px) {
.layout_list > *.item {
flex: 0 1 calc(50% - (var(--box_gap) * 1 / 2));
}
}
@media screen and (max-width: 500px) {
.layout_list > *.item {
flex: 1 0 100%;
}
}
.layout_list .layout {
display: flex;
flex-flow: column;
gap: var(--box_gap);
border-radius: var(--box_ss_corner);
}
.layout_list .photo img {
margin: 0 auto;
width: 100%;
}
.layout_list .info {
display: flex;
flex-flow: column;
gap: var(--box_ss_gap);
padding: var(--box_ss_space);
}
.layout_list .tit {
font-size: 1.1rem;
font-weight: 600;
}
.layout_list .tit em {
font-weight: 400;
font-style: normal;
}
.layout_list .txt {
line-height: 1.6;
}



.problem_box {
padding: var(--box_space);
border-radius: var(--box_corner);
}

/* ============================================================
temp
============================================================ */

body #wrap .pt0 { padding-top: 0;}
body #wrap .pb0 { padding-bottom: 0;}