@charset "utf-8";

.pc{
display: none!important;
}

section{
overflow: hidden
}

/*--------------------nav--------------------*/

nav.menu{
width: 100%;
position: fixed;
top:0px;
left: 0px;
background: #fff;
z-index: 10;
padding: 0px 3%;
height: 60px;
display: flex;
align-items: center;
box-shadow: 2px 2px 6px #dcdcdc;
}

ul.nav{
width: 100%;
}

li.nav_left{
width: 100%
}

h1.nav{
display: none
}

h2.nav{
font-size:15px;
display: flex;
line-height: 1.2;
align-items: center;
text-align: center;
}

img.nav_logo{
width: 160px;
}

div.nav_icon{
display: flex;
align-items: center;
width: calc(100% - 190px - 34px);
gap: 5px;
margin-left: 10px
}

a.nav_icon{
display: block
}



li.nav_right{
display: none;
}

div.nav_right{
display: none;
}

a.menu-trigger,
a.menu-trigger span {
display:block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
width: 34px;
height: 24px;
position: absolute;
right: 3%;
top:50%;
transform: translateY(-50%)
}

a.menu-trigger span {
position: absolute;
right: 0;
width: 100%;
height: 2px;
background: #205299;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
top: 11px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(11px) rotate(-45deg);
transform: translateY(11px) rotate(-45deg);
}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-11x) rotate(45deg);
transform: translateY(-11px) rotate(45deg);
}

.menuIn{
animation-fill-mode:both;
animation-duration:0.5s; 
animation-name: menuIn;
display: block!important;
}
 
@keyframes menuIn {
0% { opacity: 0;}
100% {opacity: 100;}
}

menu.menu{
width: 100%;
position: fixed;
top:0px;
left: 0px;
background: #3594fd;
width: 100%;
height: 100%;
z-index: 11;
display: none;
}

li.menu{
width: 100%;
top:50%;
transform: translateY(-50%);
position: absolute
}

div.menu_nav{
padding: 15px 3%;
background: #fff;
display: flex;
align-items: center;
position: relative
}

img.menu_nav_logo{
width: 40%;
}

div.menu_nav_logo_right{
display: flex;
align-items: center
}

a.menu_nav_logo_right{
width: 38px;
margin-left: 10px
}

a.menu{
display: block;
width: 84%;
margin: 0px auto;
font-size: 18px;
padding: 10px 0px;
color: #fff;
border-bottom: solid 1px #fff
}

a.menu_contact{
display: block;
background: #fff;
color:#3594fd;
width: 84%;
margin: 20px auto 0px auto;
text-align: center;
padding: 10px 0px;
position: relative;
font-size: 16px
}

a.menu_contact:after{
content: "▶︎";
position: absolute;
width: 20px;
display: flex;
font-size: 20px;
align-items: center;
height: 20px;
right: 15px;
top:50%;
transform: translateY(-50%);
}

/*--------------------header--------------------*/

header.header{
background-size: 100%;
padding-top: 70px;
position: relative;
overflow: hidden
}

/*

header.header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40vh;
background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 1) 100%);
pointer-events: none; 
}

*/


article.header{
width: 94%;
margin: 0px auto 5px auto;
text-align: center;
display: flex;
align-items: center;
position: relative;
justify-content: center;
}

h3.header{
width: max-content;
font-size: 28px;
background: linear-gradient(to bottom, #ff0000, #000000); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Noto Serif JP", serif;
font-weight: 900;
font-style: normal; 
flex-wrap: nowrap
}

h4.header{
font-size: 16px;
}

article.header_left{
width: max-content;
margin: 0px auto;
position: relative;
text-align: center;
}

h2.header{
font-size:24px;
line-height: 1.4;
position: relative
}

small.exception{
font-size:30px;
color: #000;
font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
display: inline;
vertical-align: bottom;
line-height: 100%
}

span.yellow_back{
position: relative;
display: inline-block;
margin-bottom: 10px
}

span.yellow_back:after,h2.header2:after{
content: "";
position: absolute;
width: 100%;
height: 20px;
background: #ffff34;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
border:solid 1px #d0d0d1;
border-radius: 2px;
box-shadow: 2px 4px 0px #ffce25
}

h2.header2{
font-size:32px;
}

h2.header strong,h2.header2 strong{
font-family: "Noto Serif JP", serif!important;
font-size:42px;
transform: skewX(-10deg);
display: inline-block;
color: #ef6000;
line-height: 100%;
}

h2.header b,h2.header2 b{
font-size:48px;
display: inline-block;
transform: skewX(-10deg);
font-family: "Noto Serif JP", serif!important;
line-height: 100%;
}

article.header_tel{
position: relative;
top:15px
}

h6.header{
width: 100%;
padding: 5px 0px;
background: #ff0000;
color: #fff;
text-align: center;
font-size:20px;
}

article.total{
margin-top: 40px;
position: relative;
padding-top: 20px;
padding-left: 20px;
margin-bottom: 40px;
}

img.badge{
width: 110px;
position: absolute;
top:-30px;
left: -10px
}

h2.header3{
font-size:28px;
line-height: 1.2;
font-family: "Noto Serif JP", serif!important;
}

h3.header3{
font-size:40px;
font-family: "Noto Serif JP", serif!important;
}

h3.header3 span{
font-size: 1.6em;
}

div.text-stack {
position: relative;
margin-bottom: 20px
}

.text-stack span {
font-weight: inherit;
font-size: inherit;
}

.text-back {
position: absolute;
top: 0;
left: 0;
color: transparent;
text-shadow:-1px -1px 0 #000,0   -1px 0 #000,1px -1px 0 #000,-1px  0   0 #000,1px  0   0 #000,-1px  1px 0 #000,0    1px 0 #000,1px  1px 0 #000;
z-index: 1;
}

.text-front {
position: relative;
color: #fff; 
z-index: 2;
}

.header3 {
font-weight: bold;
background: linear-gradient(180deg, rgba(137, 112, 8, 1) 0%, rgba(248, 241, 203, 1) 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; 
}

article.header_contact{
background: #ef6000;
padding: 20px 0px 5px 0px;
}

h1.main{
font-size:18px;
color: #db1111;
font-family: "Noto Serif JP", serif!important;
text-align: center;
margin-bottom: 20px;
position: relative;
z-index: 2
}

article.achievements{
width: 100%;
padding: 0px 3%;
display: flex;
background: #fff;
position: relative;
z-index: 1;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px;
padding-bottom: 20px
}

article.achievements:before{
content: "";
width: 100%;
height: 80px;
position: absolute;
left: 0px;
top:-80px;
background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 1) 100%);
pointer-events: none; 
}

h3.achievements{
width: max-content;
color: #2c1400;
letter-spacing: 0em;
font-family: "Noto Serif JP", serif!important;
font-size:19px;
position: relative;
display: flex;
align-items: center;
justify-content: center
}

h3.achievements div{
position: absolute;
text-align: center;
top:-5px
}

h3.achievements div span{
font-size:16px;
display: inline-block;
margin: 0px 5px;
background: #FFF4DC;
background: linear-gradient(90deg,rgba(255, 244, 220, 1) 0%, rgba(105, 72, 9, 1) 4%, rgba(100, 66, 2, 1) 26%, rgba(201, 140, 22, 1) 50%, rgba(255, 244, 220, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; 
}

h3.achievements:before{
content: "";
width: 20px;
height: 50px;
background: url(../img/header/left.png) no-repeat center;
background-size: cover
}

h3.achievements:after{
content: "";
width: 20px;
height: 50px;
background: url(../img/header/right.png) no-repeat center;
background-size: cover
}

div.header_image{
width: 60%;
position: absolute;
top: -30px;
right: 0px;

}

article.header_image{
position:absolute;
font-family: 'MS PGothic';

}

article.header_image1{
width: 160px;
}

article.header_image2{
width: 160px;
}

article.header_image3{
width: 200px;
}

article.header_image1{
right: -40px
}

article.header_image2{
left:-30px
}

article.header_image3{
left:50%;
transform: translateX(-50%);
top:60px
}

h2.header_image{
width: 100%;
position: absolute;
font-size:10px;
line-height: 1.2;
font-family: 'MS PGothic';
color: #fff;
text-align: center;
text-shadow:-1px -1px 0 #000,0   -1px 0 #000,1px -1px 0 #000,-1px  0   0 #000,1px  0   0 #000,-1px  1px 0 #000,0    1px 0 #000,1px  1px 0 #000;
}

strong.header_image{
font-size:13px;
display: block;
margin-top: 5px;
}

h2.header_image1{
top:10px;
left: -60px
}

h2.header_image2{
left: -20px;
top:110px;
}

h2.header_image3{
top:105px;
right: -40px
}

a.header_contact_tel{
display: block;
text-align: center;
background: #fff;
color: #205299;
width: 94%;
margin: 0px auto 15px auto;
padding: 8px 0px;
border-radius: 5px;
border:solid 2px #205299;
box-shadow: 3px 3px 0px #205299;
}

a.header_contact_tel div{
display: flex;
align-items: center;;
justify-content: center
}

h3.header_contact_tel{
width: 100%;
font-size:12px;
letter-spacing: 0.2em;
}

img.header_contact_tel{
width: 50px;
margin-right: 10px
}

p.header_contact_tel{
font-family: 'Impact';
font-size: 30px;
font-weight: 400;
letter-spacing: 0.05em;
margin: 3px 0px
}

div.header_contact{
width: 94%;
margin: 0px auto 15px auto;
}

a.header_contact{
border-radius: 5px;
display: flex;
align-items: center;
color: #fff;
padding: 5px 20px 5px 20px;
justify-content: space-between;
}

a.header_contact_line{
background: #07BA3D;
background: linear-gradient(90deg,rgba(7, 186, 61, 1) 0%, rgba(9, 227, 74, 1) 100%);
border: solid 2px #00902b;
margin-bottom: 10px
}

img.header_contact_line{
width: 30px;
}

h3.header_contact_line{
text-align: center;
font-size:20px
}

h3.header_contact_line small{
font-size:13px
}

a.header_contact_mail{
background: #3695FE;
background: linear-gradient(90deg,rgba(54, 149, 254, 1) 0%, rgba(146, 248, 255, 1) 100%);
border: solid 2px #004ca0;
}

img.arrow_icon{
width: 10px
}

/*--------------------worries--------------------*/

section#worries{
padding: 20px 0px 0px 0px;
background: #fff;
}

h2.worries{
font-size: 24px;
color: #205299;
text-align: center;
line-height: 1.2;
}

h2.worries span{
font-size: 32px;
display: inline-block;
vertical-align: central;
}

article.worries{
width: 100%;
padding: 20px 3%;
background: url(../img/worries/image.png) no-repeat bottom right -20px;
background-size: 40%
}

h3.worries{
font-size:15px;
display: flex;
align-items: center;
line-height: 1.4
}

h3.worries:last-of-type{
margin-bottom: 0px;
}

h3.worries:before{
content: "";
width: 40px;
height: 40px;
background: url(../img/icon/worries.png) no-repeat center;
background-size: 100%;
flex-shrink: 0; 
margin-right: 5px; 
}

/*--------------------mind--------------------*/

section#mind{
background: #205299;
position: relative;
color: #fff;
padding: 0px 3% 20px 3%;
}

section#mind:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
background: url(../img/mind/back.jpg) no-repeat center;
background-size: cover;
mix-blend-mode:overlay
}

h2.mind{
font-size:15px;
line-height: 1.3;
display: flex;
align-items: center;
margin-bottom: 20px;
padding-top: 10px
}

h2.mind:before{
content: "";
width: 60px;
height: 80px;
margin-right: 10px;
background: url(../img/mind/parts.png) no-repeat center top 0px;
background-size: contain;
position: relative;
top:-10px
}

article.mind{
width: 100%
}

h4.mind{
font-size:16px;
font-weight: 500;
line-height: 1.6;
margin-bottom: 20px;
text-align: justify
}

h3.mind{
font-size:16px;
line-height: 1.4;
text-align: center
}

/*--------------------error--------------------*/

section#error{
padding: 20px 0px 40px 0px;
}

div.triangle-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px; 
margin-bottom: 20px
}

div.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 25px solid #205299!important; 
}

h2.error{
width: 100%;
margin: 0px auto 50px auto;
font-size: 35px;
background: linear-gradient(to bottom, #ff4d4d, #b30000); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
transform: rotate(-2deg); 
}

article.error{
width: 94%;
margin: 0px auto
}

h5.error{
font-size:16px;
line-height: 1.8;
font-weight: 500!important
}

span.error{
color: #c90000;
font-weight: 900
}

span.underline {
text-decoration-line: underline;
text-decoration-color: #c90000;
text-underline-offset: 4px; 
text-decoration-thickness: 2px; 
}

span.background{
color: #c90000;
font-weight: 900;
background: #ffea3c
}

/*--------------------error--------------------*/

section#why{
padding: 20px 3% 20px 3%;
background: #d8e8ff;
text-align: center;
overflow: hidden
}

h2.why{
font-size:28px;
color: #205299;
font-weight: 700;
line-height: 1.4;
padding: 10px0px 10px 0px;
margin-bottom: 40px;
background: url(../img/why/title_back.png) no-repeat center left;
background-size: auto 80%
}

h2.why span{
position: relative;
z-index: 1
}

h2.why span:after{
content: "";
position: absolute;
width: 100%;
height: 8px;
background: #ffff34;
left: 0px;
bottom: 5px;
z-index: -1
}

div.why{
margin-bottom: 20px
}

article.why{
background: #aecfff;
border-radius: 5px;
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 15px
}

h3.why{
width: 30%;
color: #205299;
font-size:16px;
}

h3.why span{
font-family: 'Berlin Sans FB Demi Bold';
display: block;
color: #fff;
margin-bottom: 10px;
font-size: 24px;
letter-spacing: 0.05em
}

h5.why{
width: 70%;
background: #fff;
padding: 15px;
border-radius: 10px;
font-size:16px;
font-weight: 500;
line-height: 1.5;
text-align: justify
}

div.triangle-down {
border-top: 36px solid #205299; 
}

h4.why{
color: #205299;
width: max-content;
font-size:20px;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 4px;
margin-bottom: 10px;
margin-left: 3%;
position: relative;
z-index: 1;
text-shadow:-1px -1px 0 #fff,0   -1px 0 #fff,1px -1px 0 #fff,-1px  0   0 #fff,1px  0   0 #fff,-1px  1px 0 #fff,0    1px 0 #fff,1px  1px 0 #fff;
}

h6.why{
width: max-content;
color: #205299;
font-size:12px;
margin-left: 3%;
margin-bottom: 40px;
position: relative;
line-height: 1.4;
z-index: 1;
text-shadow:-1px -1px 0 #fff,0   -1px 0 #fff,1px -1px 0 #fff,-1px  0   0 #fff,1px  0   0 #fff,-1px  1px 0 #fff,0    1px 0 #fff,1px  1px 0 #fff;
}

div.why_case_wrapper{
position: relative
}

img.why_case_image{
width: 250px;
top:40%;
transform: translateY(-50%);
position: absolute;
right:-100px;
}

article.why_case{
background: #fff;
padding: 10px 0px;
margin: 0px auto 20px auto;
border:solid 2px #205299;
display: flex;
align-items: center;
position: relative;
z-index: 1
}

article.why_case:before{
content: "";
background: #205299;
width: 29px;
height: 100%;
position: absolute;
left: 0px;
top:0px
}

img.why_icon{
position: absolute;
width: 34px;
}

img.why_icon1{
left:-5px;
top:-30px
}

img.why_icon2{
top:-10px;
right: -10px
}

img.why_icon3{
left:10px;
bottom:-30px
}

h3.why_case {
width: 29px;
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 16px;
line-height: 1.8;
position: relative;
z-index: 1;
color: #fff;
}

div.why_case{
padding: 0px 10px
}

h4.why_case{
font-size: 14px;
color: #205299;
margin-bottom: 10px
}

h5.why_case{
font-size: 14px;
line-height: 1.4;
font-weight: 500;
text-align: justify
}

/*--------------------error--------------------*/

section#ob{
width: 100%;
padding-bottom: 20px;
position: relative
}

p.ob{
width: 58%;
position: relative;
position: absolute;
bottom:0px;
left: -60px;
overflow: hidden
}

p.ob:after{
content: "";
position: absolute;
width: 140px;
height: 140px;
background: #bc002d;
border-radius: 95px;
bottom:-20px;
right: -0px;

}

article.ob{
width: 100%;
position: relative;
z-index: 1
}

h2.ob{
font-size: 22px;
background: linear-gradient(to bottom, #68e0cf, #2facf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
transform: skewX(-10deg) rotate(-2deg); 
position: relative;
}

h2.ob:nth-of-type(1){
left: 10px;
padding-top: 40px
}

h2.ob:nth-of-type(2){
margin-bottom: 30px;
left: 20px;
}

h2.ob strong{
font-size:140%;
font-family: "Noto Serif JP", serif!important;
}

h5.ob{
width: 70%;
margin-left: 30%;
font-size:12px;
line-height: 1.5;
font-weight: 500;
margin-bottom: 20px;
text-shadow:
1px 1px 0 #fff,
-1px 1px 0 #fff,
1px -1px 0 #fff,
-1px -1px 0 #fff,
0px 1px 0 #fff,
0px -1px 0 #fff,
1px 0px 0 #fff,
-1px 0px 0 #fff;
}

h3.ob{
margin-left: 30%;
width: max-content;
background: #205299;
text-align: center;
padding: 8px 15px;
color: #fff;
border-radius: 5px;
margin-bottom: 20px
}

ul.ob{
position: relative;
margin-bottom: 20px
}

li.ob{
width: 70%;
margin-left: 30%;
}

h4.ob{
font-size:11px;
white-space: nowrap;
margin-bottom: 10px;
text-shadow:
1px 1px 0 #fff,
-1px 1px 0 #fff,
1px -1px 0 #fff,
-1px -1px 0 #fff,
0px 1px 0 #fff,
0px -1px 0 #fff,
1px 0px 0 #fff,
-1px 0px 0 #fff;
}

h4.ob:before{
content: "・"
}

ul.ob:after{
content: "など…";
position: absolute;
bottom: -30px;
right: 10px
}

p.zaiseki{
margin-left: 30%;
width: max-content;
border-radius: 3px;
padding: 3px 10px;
background: #fff;
box-shadow: 2px 2px 8px #000;
color: #bc002d;
font-size: 18px;
margin-bottom: 20px
}

h3.zaiseki{
margin-left: 30%;
font-family: "Noto Serif JP", serif;
font-size:13px;
margin-bottom: 10px
}

h1.zaiseki{
margin-left: 30%;
font-family: "Noto Serif JP", serif;
font-size:26px
}

h1.zaiseki small{
font-size:16px
}

h3.zaiseki, h1.zaiseki {
text-shadow:1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff,0px 1px 0 #fff,0px -1px 0 #fff,1px 0px 0 #fff,-1px 0px 0 #fff,3px 3px 6px rgba(0, 0, 0, 0.3);
}

/*--------------------method--------------------*/

section#method{
background: #205299;
position: relative;
color: #fff;
padding: 20px 3% 20px 3%;

}

section#method:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
background: url(../img/mind/back.jpg) no-repeat center;
background-size: cover;
mix-blend-mode:overlay
}

h2.method{
width: 90%;
margin: 0px auto;
display: flex;
align-items: center;
line-height: 1.2;
background: #fff;
justify-content: center;
text-align: center;
color:#309bfd;
position: relative;
z-index: 1;
font-size:20px;
height: 64px;
margin-bottom: 20px;
border-radius: 32px;
}

h2.method::before {
content: "";
position: absolute;
top: -12px;
right: -5px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 0px 0px 8px 12px;
transform: rotate(-30deg);
}

h2.method::after {
content: "";
position: absolute;
top: 0px;
right: -19px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 0px 0px 8px 12px;
transform: rotate(0deg);
}

div.method_triangle-down {
width: 0;
height: 0;
border-left: 40px solid transparent; 
border-right: 40px solid transparent; 
border-top: 18px solid #fff; 
}

h3.method{
color: #fff;
text-align: center;
font-size: 18px;
line-height: 1.4;
margin-bottom: 20px
}

article.method{
padding: 15px;
background: #fff;
border:solid 2px #205299;
box-shadow: 4px 4px 4px #163d67;
position: relative;
z-index: 1;
color: #000;
position: relative;
margin-bottom: 20px
}

article.method:after{
content: "";
width: 90px;
height: 90px;
background: url(../img/icon/memo.png) no-repeat center;
background-size: 100%;
position: absolute;
right: 10px;
top: 10px;
transform: rotate(10deg)
}

h4.method{
font-size:18px;
line-height: 1.2;
margin-bottom: 20px;
position: relative;
z-index: 1;
text-shadow:1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff,0px 1px 0 #fff,0px -1px 0 #fff,1px 0px 0 #fff,-1px 0px 0 #fff;
}

h4.item{
display: flex;
justify-content: left;
align-items: center;
position: relative;
white-space: nowrap;
}

b.item_small{
width: 70%;
font-size: 10px;
display: block;
}

h4.item:before{
content: "";
width: 30px;
height: 30px;
display:block;
background: url(../img/icon/method.png) no-repeat center;
background-size: cover;
margin-right: 10px
}

p.method{
text-align: center;
font-size:10px;
position: relative;
z-index: 1;
line-height: 1.6
}

span.method{
background: #ffea3c;
color: #000
}

/*--------------------sample--------------------*/

section#sample{
padding: 30px 3% 30px 3%;
background: #fff;
}

h2.sample{
font-size:22px;
text-align: center;
color: #205299;
margin-bottom: 30px
}

article.sample{
background: #f0fbff;
border:solid 1px #9bb5cd;
border-radius: 15px;
padding: 15px;
box-shadow: 5px 5px 0px #a4b5cc;
margin-bottom: 30px
}

h3.sample{
width: 100%;
height: 40px;
margin: 0px auto 20px auto;
line-height: 40px;
color: #205299;
border-radius: 20px;
border:solid 2px #205299;
text-align: center;
background: #fff;
font-size:18px;
letter-spacing: 0.05em
}

ul.sample{
display:block;
}

h4.sample{
color: #ef6000;
font-size:20px;
margin-bottom: 10px;
text-align: center
}

h5.sample{
font-size:16px;
text-align: justify;
line-height: 1.6;
font-weight: 500;
margin-bottom: 20px
}

img.sample_image{
width: 60%;
margin: 0px auto;
}

/*--------------------plan--------------------*/

section#plan{
background: #205299;
position: relative;
color: #fff;
padding-top: 20px;
padding-bottom: 30px;
}

section#plan:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
background: url(../img/mind/back.jpg) no-repeat center;
background-size: cover;
mix-blend-mode:overlay
}

h2.plan{
text-align: center;
font-size:28px;
background: url(../img/plan/title.png) no-repeat center;
background-size: 70%;
height: 70px;
position: relative;
z-index: 1;
}

h3.plan{
width: 94%;
margin: 0px auto;
font-size:16px;
text-align: center;
padding: 10px 0px;
border:solid 2px #fff;
position: relative;
top:-30px
}

div.plan{
position: relative;
z-index: 1;
margin-bottom: 20px
}

article.plan{
width: 94%;
margin: 0px auto 20px auto;
background: #fff;
padding: 15px;
border-radius: 5px;
position: relative;
}

article.plan:not(:nth-of-type(4))::after {
content: "";
width: 40px;
height: 40px;
background: url(../img/plan/plus.png) no-repeat center;
background-size: 100%;
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
z-index: 1
}

.plan_flex{
display: flex;
align-items: center;
flex-wrap: wrap
}

h4.plan{
background: #aecfff;
text-align: center;
color: #000;
padding: 5px 0px;
margin-bottom: 10px;
border-radius: 5px
}

div.plan_inner{
width: 100%;
color: #000;
display: flex;
align-items: center;
justify-content:center;
position: relative
}

div.flex_center h5.red{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}

div.flex_center h6.plan_inner{
position: relative;
transform: translateX(100%)
}

h5.plan{
width: calc(100% / 3);
font-size:34px;
white-space: nowrap;
}

.mr10{
margin-right: 10px
}

hr.plan{
display: none
}

div.division{
border-right: solid 2px #3693fa;
width: calc(100% / 3);
text-align: center!important
}

div.division:last-of-type{
border-right: none;
}

div.division50{
width: calc(100% / 2.5);
text-align: center!important
}

div.division h6{
width: 100%;
}

p.plan{
font-size:42px;
white-space: nowrap;
text-align: center;
margin: 0px auto;
color: #dc0000;
padding-left: 30px
}

h6.addition{
font-size:15px!important;
padding-right: 20px
}

h5.plan small,p.plan small{
font-size:18px;
position: relative;
top:-3px
}

h6.plan_inner{
width: max-content;
font-size:13px;
white-space: nowrap;
align-items: center;
margin-right: 5px
}

.center{
text-align: center;
width: max-content!important;
line-height: 1.3;
margin: 0px auto;
}

.mb10{
margin-bottom: 10px
}

h5.red{
color: #dc0000;
width: max-content!important;
font-size: 42px;
margin-right: 10px
}

hr.plan{
border:none;
width: 100%;
height: 2px;
background: #3693fa;
margin-bottom: 5px
}

span.plan_inner{
display:block;
color:#3399ff;
font-size: 12px;
width: 100%;
position: relative;
text-align: center;
}

p.omission{
width: 94%;
font-size:14px;
margin: 0px auto;
font-weight: 500
}

p.omission:nth-of-type(2){
margin-bottom: 50px
}

h3.omission{
text-align: center;
font-size:12px;
}

/*--------------------process--------------------*/

section#process{
padding: 30px 0 30px 0;
}

h2.process{
text-align: center;
font-size:28px;
background: url(../img/process/title.png) no-repeat left -10px top;
background-size: auto 70%;
height: 100px;
line-height: 100px;
color: #205299;
letter-spacing: 0.05em;
}

div.process_post{
width: 94%;
margin: 0px 3% 25px 3%;
border:solid 2px #3793fa;
position: relative;
display: flex;
align-items: center;
}

div.process_post::after {
content: "";
position: absolute;
left: 50%;
bottom: -20px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #3793fa;
}

div.process_post:last-of-type::after {
content: "";
position: absolute;
top: 50%;
right: -10px; 
transform: translateY(-50%);
width: 0;
height: 0;
border:none;
}

span.process{
display: block;
text-align: center;
background: #3793fa;
font-family: 'Impact';
font-weight: 500;
color: #fff;
padding: 5px 10px;
height: 100%
}

p.process_step{
font-size:16px
}

p.process_nom{
font-size:24px;
line-height: 100%;
}

article.process{
width: 100%;
display: flex;
justify-content: center; 
}

h3.process{
color: #3793fa;
line-height: 1.4;
text-align: center;
font-size: 18px
}

div.yellow{
background: #FAFFC2;
background: linear-gradient(90deg,rgba(250, 255, 194, 1) 0%, rgba(254, 255, 250, 1) 80%);
}

div.blue{
background: #C4E6FF;
background: linear-gradient(90deg,rgba(196, 230, 255, 1) 0%, rgba(231, 240, 253, 1) 80%);
}

div.pink{
background: #FFC8C2;
background: linear-gradient(90deg,rgba(255, 200, 194, 1) 0%, rgba(255, 250, 249, 1) 80%);
}

div.process_srep{
display: flex;
align-items: start;
justify-content: center;
gap: 40px
}

div.point-wrapper {
position: relative;
width: 94%;
margin: 20px auto;
}

div.point-wrapper:nth-of-type(2) {
position: relative;
width: 500px
}

h5.point-label {
width: max-content;
display: block;
position: absolute;
top: -20px;
left: 5px;
font-size: 50px;
color: #f60; 
font-family: 'Freestyle Script Regular';
font-weight: 400;
text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px1px 0 #fff,1px1px 0 #fff; 
transform: rotate(-10deg); 
z-index: 2
}

.speech-bubble {
position: relative;
padding: 15px;
border: 3px solid #5f5f5f;
border-radius: 10px;
background: #fff;
box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
line-height: 1.8;
}

.speech-bubble::before {
content: "";
position: absolute;
top: -40px; 
left: 280px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent #555 transparent;
z-index: 1;
}

.speech-bubble::after {
content: "";
position: absolute;
top: -37px; 
left: 280px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent #fff transparent;
z-index: 2;
}

.point_right::before{
left: 280px;
}

.point_right::after{
left: 280px;
}

h4.point-wrapper{
color: #5f5f5f;
line-height: 1.4;
font-weight: 500;
font-size: 16px
}

/*--------------------message--------------------*/

section#message{
padding: 30px 3% 30px 3%;
background: url(../img/message/back.jpg) no-repeat center;
background-size: cover;
position: relative;
}

section#message:after{
content:"";
background: rgba(255,255,255,0.8);
position: absolute;
width: 100%;
height: 100%;
top:0px;
left: 0px;
}

h2.message{
font-family: "Noto Serif JP", serif;
text-align: center;
font-size:30px;
position: relative;
z-index: 1;
margin-bottom: 30px
}

div.message{
position: relative;
z-index: 1;
margin-bottom: 30px
}

article.message{
width: 100%
}

h6.message{
font-size:15px;
line-height: 1.6;
font-family: "Noto Serif JP", serif;
text-align: justify;
margin-bottom: 30px
}

div.message_image{
width: 100%;
}

img.message_image:nth-of-type(1){
margin-bottom: 20px
}

h4.message{
position: relative;
font-size:16px;
z-index: 1;
font-family: "Noto Serif JP", serif;
text-align: right;
margin-bottom: 30px;
line-height: 1.4;
}

h4.message strong{
font-size:28px;
margin-left: 15px
}

article.profile{
border:solid 2px #205299;
padding: 0px 15px 15px 15px;
position: relative;
z-index: 1;
}

article.profile:after{
content: "";
position: absolute;
right: -30px;
bottom:0px;
width: 46%;
aspect-ratio: 7 / 16;
background: url(../img/message/profile_mobile.png) no-repeat center top;
background-size: cover
}

p.profile{
width: max-content;
padding: 0px 15px;
color: #fff;
background: #205299;
font-size:18px;
height: 24px;
line-height: 24px;
position: relative;
top:-12px;
margin-bottom: 10px
}

h4.profile{
font-size:9px;
margin-bottom: 30px
}

h3.profile{
margin-bottom: 20px;
display: flex;
align-items: center
}

h3.profile strong{
font-size:28px;
margin-left: 15px
}

h6.profile{
width: 70%;
font-size:13px;
font-family: "Noto Serif JP", serif;
line-height: 1.5;
text-align: justify;
z-index: 1;
position: relative;
text-shadow:
  -1px -1px 0 #fff,
   1px -1px 0 #fff,
  -1px  1px 0 #fff,
   1px  1px 0 #fff;
}

/*--------------------bottom_contact--------------------*/

div.bottom_contact{
width: 100%;
position: fixed;
left: 0px;
bottom:0px;
background: #ef6000;
padding: 10px 3%;
z-index: 10;
display: none;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

div.bottom_contact.showing {
display: block
}

div.bottom_contact.visible {
opacity: 1;
transform: translateY(0); 
}

a.bottom_contact_tel{
width: 49%;
background: #fff;
color: #205299;
height: 50px;
text-align: center;
padding-top:5px;
border-radius: 10px;
border:solid 2px #444;
box-shadow: 2px 2px 0px #5b5843;
}

a.bottom_contact_line{
width: 49%;
background: #07BA3D;
background: linear-gradient(90deg,rgba(7, 186, 61, 1) 0%, rgba(9, 227, 74, 1) 100%);
border: solid 2px #00902b;
}

div.bottom_contact_flex{
display: flex;
align-items: center;
gap:5px;
}

h3.bottom_contact_tel{
font-size:10px;
letter-spacing: 0em;
white-space: nowrap;
}

h3.bottom_contact_tel span{
display: inline-block;
color: #ff0000
}

img.bottom_contact_tel{
width: 30px;
margin-right: 10px
}

p.bottom_contact_tel{
font-family: 'Impact';
font-size: 24px;
font-weight: 400;
white-space: nowrap;
}

a.bottom_contact{
width: 200px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
color: #fff;
padding: 0px 0px 0px 10px;

white-space: nowrap;
}

img.bottom_contact_line{
width: 26px;
margin-right: 5px
}

h3.bottom_contact_line{
font-size:18px;
}

img.bottom_contact{
width: 8px;
}

/*--------------------footer--------------------*/

footer.footer{
background: #ffea3c;
padding: 20px 3% 30px 3%;
position: relative;
}

.exception{
padding-bottom: 80px!important
}

p.footer_image{
width: 220px;
aspect-ratio: 2 / 3;
background: url(../img/footer/model.png) no-repeat center top;
background-size: 100%;
position: absolute;;
left: -30px;
top:-20px
}

article.footer{
width: 100%;
}

h3.footer{
width: 80%;
margin-left: 20%;
font-size:15px;
text-align: center;
margin-bottom: 5px;
position: relative;
z-index: 2
}

h3.footer:nth-of-type(2){
color: #ef6000
}

h3.footer:nth-of-type(3){
margin-bottom: 50px
}

h3.footer strong{
font-size:20px;
}

a.footer_contact_tel{
width: 100%;
display: block;
background: #fff;
color: #205299;
margin: 0px auto 15px auto;
padding: 5px 20px;
border-radius: 5px;
border:solid 2px #205299;
box-shadow: 2px 2px 0px #205299;
text-align: center;
position: relative;
z-index: 1
}

a.footer_contact_tel div{
display: flex;
align-items: center;
justify-content: center;
margin: 3px 0px
}

h3.footer_contact_tel{
width: 100%;
line-height: 1.4;
font-size:14px;
letter-spacing: 0.1em;
margin-right: 10px
}

img.footer_contact_tel{
width: 60px;
margin-right: 10px
}

p.footer_contact_tel{
font-family: 'Impact';
font-size: 34px;
font-weight: 400;
letter-spacing: 0.05em
}

div.footer_contact{
width: 100%;
margin: 0px auto 15px auto;
position: relative;
z-index: 1
}

h3.footer_contact_line{
font-size:20px
}

a.footer_contact{
border-radius: 5px;
display: flex;
align-items: center;
color: #fff;
padding: 5px 10px 5px 20px;
justify-content: space-between;
}

/*--------------------contents--------------------*/

header.contents_header{
padding-top: 20px;
background: #fff
}

ol.contents {
width: 94%;
margin: 0px auto;
font-size: 12px;
border-bottom: solid 1px #dcdcdc;
padding-top: 60px;
padding-bottom: 20px;
}

ol li{
display:inline-block;
list-style: none;
vertical-align: middle
}

ol li:after{
content: '»';
font-size: 14px;
margin: 0px 5px 0px 5px;
color:#999
}

ol li:last-child:after{
content: '';
display: none;
}

ol li a {
text-decoration: none;
color: #000;
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 12px;
padding-left: 20px;
}

ol li a:hover {
text-decoration: underline;
}

/*--------------------form--------------------*/

div.contact{
width: 94%;
margin: 0px auto 20px auto;
position: relative;
z-index: 1
}

ul.contact{
display:block;
font-size:15px;
margin-bottom: 20px
}

ul.contact:last-of-type{
margin-bottom: 40px;
}

li.contact_left{
display: block;
}

span.contact_left{
font-size:13px;
background: #205299;
color:#fff;
padding: 5px 12px 5px 12px;
margin-left: 10px;
}

li.contact_right{
display: block;
border-bottom: solid 1px #fff;
padding: 20px 0px 20px 0px;
}

div.check{
width: 300px;
margin: 0px auto;
font-size:16px;
font-weight: 100;
margin-bottom: 40px;
}

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

a.checkbox{
text-decoration: underline;
color: #fff
}

a.checkbox:hover{
text-decoration: none;
}

h2.complete{
text-align: center;
margin-bottom: 25px
}

p.complete{
text-align: center;
margin-bottom: 20px;
font-size: 13px;
}

p.complete:last-of-type{
margin-bottom: 40px
}

a.complete{
width: 300px;
height: 50px;
display: block;
margin: 0px auto;
background: #28c3d1;
background-size: 22px;
-webkit-appearance: none;
border:none;
color:#fff;
border-radius: 5px;
text-align: center;
line-height: 50px;
margin-top: 20px
}

a.complete:hover{
cursor: pointer;
opacity: 0.7;
}

h2.contact{
text-align: center;
font-size:28px;
background: url(../img/contact/title.png) no-repeat center;
background-size: 70%;
height: 70px;
position: relative;
z-index: 1;
}

h2.privacy{
text-align: center;
font-size:28px;
background: url(../img/privacy/title.png) no-repeat center;
background-size: 70%;
height: 70px;
position: relative;
z-index: 1;
}

article.contents{
width: 94%;

margin: 0px auto 30px auto;
}

h3.contents{
font-size:14px;
font-weight: 600;
margin-bottom: 30px;
}

h4.contents{
font-size: 12px;
font-weight: 400;
line-height: 2.0
}

a.backhome{
width: 300px;
height: 50px;
display: block;
margin: 0px auto;
background: #205299;
-webkit-appearance: none;
border:none;
font-weight: 600;
color:#fff;
border-radius: 5px;
position: relative;
z-index: 1;
text-align: center;
line-height: 50px;
}