@charset "utf-8";

.mobile{
display: none!important;
}

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

nav.menu{
width: 100%;
background: #fff;
box-shadow: 2px 2px 6px #dcdcdc;
position: relative;
z-index: 1
}

ul.nav{
width: 1200px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0px
}

li.nav_left{
width: 55%
}

h1.nav{
font-weight: 500;
font-size:14px;
margin-bottom: 10px
}

h1.nav span{
color: #ff0000;
font-weight: 600;
}

h2.nav{
font-size:22px;
display: flex;
align-items: center;
}

img.nav_logo{
width: 200px;
margin-left: 15px
}

li.nav_right{
width: 45%;
display: flex;
align-items: end;
justify-content: right
}

div.nav_right{
width: max-content;
text-align: center;
margin-left: 20px
}

a.nav_tel{
font-size:28px;
color: #205299;
display: block;
line-height: 100%;
margin-bottom: 5px;
white-space: nowrap;
font-family: "Be Vietnam Pro", sans-serif;
font-weight: 700;
font-style: normal;
}

p.nav_right{
font-size:11px;
font-weight: 500;
}

a.nav_link{
width: 140px!important;
display: block;
color: #fff;
width: 100%;
font-size:20px;
padding: 5px 0px;
border-radius: 3px;
box-shadow: 1px 1px 0px #000;
margin-top: 5px
}

a.line{
background: #06c755;
}

a.mail{
background: #ef6000
}

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

header.header{
position: relative;
background-size: 100%;
padding-top: 20px;
padding-inline: calc((100% - 1000px) / 2);
padding-bottom: 20px;
position: relative;
}

header.header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 300px;
background: linear-gradient(to top, white 0%, transparent 100%);
pointer-events: none; 
}

article.header{
width: max-content;
display: flex;
align-items: center;
justify-content: left;
margin-bottom: 30px
}

h3.header{
font-size: 42px;
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; 
transform: rotate(-3deg);
margin-right: 15px
}

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

article.header_left{
width: max-content;
margin-bottom: 20px;
position: relative
}

p.yellow_back{
display: block;
}

article.header_left:after{
content: "";
position: absolute;
width: 100%;
height: 30px;
background: #ffff34;
bottom: 0px;
z-index: -1;
border:solid 1px #d0d0d1;
border-radius: 2px;
box-shadow: 2px 4px 0px #ffce25
}

h2.header{
font-size:34px;
display: flex;
align-items: end;
}

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

h2.header2{
font-size:50px;
display: flex;
align-items: end;
}

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

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

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

img.badge{
position: absolute;
top:-20px;
left: -20px
}

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

h3.header3{
font-size:46px;
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{
width: 100%;
background: #ef6000;
padding: 30px 0px 10px 0px;
}

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

article.achievements{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1
}

h3.achievements{
color: #2c1400;
font-family: "Noto Serif JP", serif!important;
font-size:26px;
position: relative;
display: flex;
align-items: center;
}

h3.achievements div{
width: 100%;
position: absolute;
text-align: center;
top:-15px
}

h3.achievements div span{
font-size:18px;
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: 29px;
height: 72px;
background: url(../img/header/left.png) no-repeat center;
background-size: cover
}

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

div.header_image{
width: 1000px;
position: absolute;
right: calc((100% -1000px ) / 2);
bottom:0px;
display: flex;
align-items: end;
justify-content: right
}

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

article.header_image1{
width: 220px;
}

article.header_image2{
width: 240px;
}

article.header_image3{
width: 300px;
}

article.header_image1{
right: -170px
}

article.header_image2{
right: -100px
}

h2.header_image{
width: 100%;
position: absolute;
font-size:16px;
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:20px;
display: block;
margin-top: 5px
}

h2.header_image1{
left: -100px;
top:40%;
transform: translateY(-50%)
}

h2.header_image3{
top:50%;
transform: translateY(-50%)
}

a.header_contact_tel{
display: flex;
align-items: center;
background: #fff;
color: #205299;
width: 840px;
margin: 0px auto 20px auto;
padding: 10px 20px;
border-radius: 10px;
border:solid 3px #205299;
box-shadow: 5px 5px 0px #205299;
}

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

h3.header_contact_tel{
width: 40%;
line-height: 1.6;
font-size:17px;
letter-spacing: 0.2em;
margin-right: 10px
}

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

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

div.header_contact{
width: 840px;
margin: 0px auto 15px auto;
display: flex;
align-items: center;
gap: 20px
}

a.header_contact{
width: calc(100% / 2 - 10px);
height: 70px;
border-radius: 10px;
display: flex;
align-items: center;
color: #fff;
padding: 0px 30px 0px 30px;
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 3px #00902b;
}

img.header_contact_line{
width: 46px;
}

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

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

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


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

section#worries{
padding: 40px 0px 0px 0px;
background: #fff;
padding-inline: calc((100% - 1200px) / 2);
}

h2.worries{
font-size: 42px;
color: #205299;
}

article.worries{
padding: 40px 0px;
background: url(../img/worries/image.png) no-repeat bottom right;
}

h3.worries{
font-size:30px;
margin-bottom: 15px;
display: flex;
align-items: center
}

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

h3.worries:before{
content: "";
width: 50px;
height: 50px;
background: url(../img/icon/worries.png) no-repeat center;
background-size: 100%;
}

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

section#mind{
background: #205299;
position: relative;
color: #fff;
padding-inline: calc((100% - 1040px) / 2);
padding-bottom: 40px
}

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:32px;
line-height: 1.2;
display: flex;
align-items: center;
margin-bottom: 20px;
padding-top: 10px
}

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

article.mind{
width: 1040px
}

h4.mind{
font-size:16px;
font-weight: 500;
line-height: 1.8;
margin-bottom: 20px
}

h3.mind{
font-size:32px;
}

/*--------------------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: 70px solid transparent; 
border-right: 70px solid transparent; 
border-top: 36px solid #3995f3; 
}

h2.error{
width: max-content;
margin: 0px auto 50px auto;
font-size: 90px;
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: 900px;
margin: 0px auto
}

h5.error{
font-size:20px;
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
}

/*--------------------why--------------------*/

section#why{
padding: 30px 0px 30px 0px;
background: #d8e8ff;
padding-inline: calc((100% - 1040px) / 2);
text-align: center;
position: relative;
z-index: 1
}

h2.why{
font-size:38px;
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 100%
}

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{
display: flex;
justify-content: space-between;
align-items: start;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 20px
}

article.why{
width: calc(50% - 20px);
background: #aecfff;
border-radius: 8px;
display: flex;
align-items: center;
padding: 10px
}

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

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

h5.why{
width: 70%;
background: #fff;
padding: 15px;
border-radius: 10px;
font-size:15px;
font-weight: 500;
line-height: 1.8;
min-height: 160px;
letter-spacing: 0px;
display: flex;
align-items: center
}

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

h4.why{
color: #205299;
font-size:36px;
text-decoration: underline;
text-underline-offset: 5px;
margin-bottom: 10px
}

h6.why{
color: #205299;
font-size:16px;
margin-bottom: 40px
}

div.why_case_wrapper{
position: relative
}

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

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

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

img.why_icon1{
left:-40px;
bottom:-10px
}

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

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

h3.why_case {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 16px;
line-height: 1.8;
background: #205299;
color: #fff;
padding: 15px 0px
}

div.why_case{
padding: 0px 20px
}

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

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

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

section#ob{
padding-inline: calc((100% - 1040px) / 2);
display: table;
table-layout: fixed;
padding-bottom: 40px
}

p.ob{
width: 290px;
position: relative;
display: table-cell
}

img.ob{
position: absolute;
top:-40px
}

p.ob:after{
content: "";
position: absolute;
width: 190px;
height: 190px;
background: #bc002d;
border-radius: 95px;
bottom:0px;
right: -130px;
z-index: -1
}

artilce.ob{
width: 750px;
padding-left: 20px;
display: table-cell
}

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

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

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

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

h5.ob{
font-size:14px;
line-height: 1.5;
font-weight: 500;
margin-bottom: 30px
}

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

ul.ob{
display: flex;
align-items: start;
justify-content: space-between;
position: relative;
margin-bottom: 20px
}

li.ob{
width: 49%
}

h4.ob{
font-size:16px;
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: -10px;
right: 0px
}

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

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

h1.zaiseki{
font-family: "Noto Serif JP", serif;
font-size:32px
}

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

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-inline: calc((100% - 900px) / 2);
padding-top: 40px;
padding-bottom: 40px;
}

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: max-content;
padding: 0px 20px;
margin: 0px auto;
background: #fff;
color:#309bfd;
position: relative;
z-index: 1;
font-size:30px;
height: 42px;
line-height: 46px;
border-radius: 21px;
margin-bottom: 20px
}

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

h2.method::after {
content: "";
position: absolute;
top: 0px;
right: -30px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 0px 0px 10px 20px;
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: 20px;
margin-bottom: 20px
}

article.method{
padding: 20px 30px;
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: 110px;
height: 110px;
background: url(../img/icon/memo.png) no-repeat center;
background-size: 100%;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(10deg)
}

h4.method{
font-size:28px;
margin-bottom: 20px;
display: flex;
align-items: center
}

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

p.method{
text-align: center;
font-size:17px;
position: relative;
z-index: 1
}

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

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

section#sample{
padding: 60px 0px 30px 0px;
background: #fff;
padding-inline: calc((100% - 900px) / 2);
}

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

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

h3.sample{
width: 420px;
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:20px;
letter-spacing: 0.05em
}

ul.sample{
display: flex;
align-items: start
}

li.sample_left{
width: 60%
}

li.sample_right{
width: 40%
}

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

h5.sample{
font-size:14px;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
line-break: strict;
word-break: break-word;
line-height: 1.6;
font-weight: 500;
margin-bottom: 20px
}

a.sample_image{
width: 90%;
box-shadow: 3px 3px 5px #999;
display: block;
border-radius: 10px;
overflow: hidden;
margin-left: 20px
}

a.sample_image:hover img{
opacity: 0.7
}
/*--------------------plan--------------------*/

section#plan{
background: #205299;
position: relative;
color: #fff;
padding-top: 20px;
padding-inline: calc((100% - 900px) / 2);
padding-bottom: 60px
}

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:34px;
background: url(../img/plan/title.png) no-repeat right center;
background-size: auto 100px;
height: 100px;
position: relative;
z-index: 1;
line-height: 100px;
margin-bottom: 20px
}

h3.plan{
width: 600px;
margin: 0px auto;
font-size:24px;
text-align: center;
padding: 10px 0px;
border:solid 2px #fff;
margin-bottom: 30px
}

div.plan{
display: flex;
align-items: start;
gap: 15px;
justify-content: space-between;
position: relative;
z-index: 1;
margin-bottom: 20px
}

article.plan{
background: #fff;
padding: 10px;
width: 24%;
border-radius: 5px;
height: 320px;
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;
right: -32px;
top: 50%;
transform: translateY(-50%);
z-index: 1
}

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

div.plan_inner{
width: 80%;
position: absolute;
top:55%;
left: 50%;
transform: translate(-50%,-50%);
color: #000;
}

h5.plan{
font-size:38px;
margin-bottom: 30px;
font-family: "Be Vietnam Pro", sans-serif;
font-weight: 700;
font-style: normal;
}

p.plan{
font-size:50px;
font-family: "Be Vietnam Pro", sans-serif;
font-weight: 700;
font-style: normal;
color: #dc0000;

}

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

h6.plan_inner{
margin-bottom: 15px;
font-size:15px;
line-height: 1.4
}

.center{
text-align: center
}

.mb0{
margin-bottom: 0px!important
}

h5.red{
font-size:60px;
color: #dc0000
}

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

span.plan_inner{
display:block;
background-color: #3399ff; 
color:#fff;
font-size: 14px;
width: 100%;
height: 28px;
border-radius: 14px;
line-height: 28px;
position: relative;
text-align: center;
margin-bottom: 20px
}

span.plan_inner::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-width: 10px 8px 0 8px;
border-style: solid;
border-color: #3399ff transparent transparent transparent;
}

p.omission{
font-weight: 500
}

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

h3.omission{
text-align: center;
font-weight: 500
}

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

section#process{
padding-top: 60px;
padding-bottom: 60px;
padding-inline: calc((100% - 900px) / 2);
}

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

div.process{
display: flex;
align-items: stretch;
justify-content: space-between;
margin-bottom: 40px
}

div.process_post{
width: 60px;
border:solid 2px #3793fa;
position: relative
}

div.process_post::after {
content: "";
position: absolute;
top: 50%;
right: -25px; 
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 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 0px
}

p.process_step{
font-size:18px
}

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

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

h3.process{
writing-mode: vertical-rl;
color: #3793fa;
padding: 10px 0px;
line-height: 1.2
}

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

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

div.pink{
background: #FFC8C2;
background: linear-gradient(0deg,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: 400px
}

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

h5.point-label {
width: max-content;
display: block;
position: absolute;
top: -30px;
left: -20px;
font-size: 60px;
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: 20px;
border: 3px solid #5f5f5f;
border-radius: 10px;
background: #fff;
box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
line-height: 1.8;
font-size: 16px;
}

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

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

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

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

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

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

section#message{
padding-top: 30px;
padding-bottom: 90px;
padding-inline: calc((100% - 900px) / 2);
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:36px;
position: relative;
z-index: 1;
margin-bottom: 30px
}

div.message{
display: flex;
align-items: start;
position: relative;
z-index: 1;
margin-bottom: 30px
}

article.message{
width: 600px;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
line-break: strict;
 word-break: break-word;
}

h6.message{
font-size:13px;
line-height: 1.6;
font-family: "Noto Serif JP", serif;
}

div.message_image{
width: 300px;
padding-left: 30px
}

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

h4.message{
position: relative;
font-size:15px;
z-index: 1;
font-family: "Noto Serif JP", serif;
display: flex;
align-items: center;
margin-bottom: 30px;

}

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

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

article.profile:after{
content: "";
position: absolute;
right: -30px;
bottom:-92px;
width: 250px;
aspect-ratio: 9 / 16;
background: url(../img/message/profile.png) no-repeat center bottom;
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{
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: 650px;
font-size:12px;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
line-break: strict;
word-break: break-word;
font-family: "Noto Serif JP", serif;
line-height: 1.4
}

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

div.bottom_contact {
width: 100%;
min-width: 1200px;
position: fixed;
left: 0;
bottom: 0;
background: #ef6000;
padding-top: 30px;
padding-bottom: 30px;
padding-inline: calc((100% - 1200px) / 2);
align-items: center;
justify-content: space-between;
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: flex;
}

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

a.bottom_contact_tel{
width: 600px;
display: flex;
align-items: center;
background: #fff;
color: #000;
height: 60px;
padding: 0px 20px;
border-radius: 10px;
border:solid 2px #444;
box-shadow: 2px 2px 0px #5b5843;
}

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

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

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

a.bottom_contact{
width: 290px;
height: 60px;
border-radius: 10px;
display: flex;
align-items: center;
color: #fff;
padding: 0px 15px 0px 15px;
justify-content: space-between;
}

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

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

img.bottom_contact_line{
width: 34px;
margin-left: 15px
}

h3.bottom_contact_line{
font-size:18px;
text-align: center;
margin-right: 30px
}

a.page-top {
position: absolute;
right: calc((100% - 900px) / 2);
top: -35px;
width: 60px;
height: 60px;
background: #a8d9ff; 
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
font-weight: bold;
z-index: 9;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

span.arrow {
display: block;
width: 12px;
height: 12px;
border-top: 4px solid #fff;
border-left: 4px solid #fff;
transform: rotate(45deg);
}

.up1 {
margin-bottom: -2px;
}

span.page-top .label {
font-size: 10px;
margin-top: 2px;
}

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

footer.footer{
background: #ffea3c;
padding-top: 60px;
padding-inline: calc((100% - 900px) / 2);
overflow: hidden;
padding-bottom: 20px
}

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

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

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

}

article.footer{
width: 650px;
}

h3.footer{
font-size:40px;
display: flex;
align-items: end;
margin-bottom: 20px
}

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

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

a.footer_contact_tel{
display: flex;
align-items: center;
background: #fff;
color: #000;
width: 100%;
margin: 0px auto 20px auto;
padding: 10px 20px;
border-radius: 10px;
border:solid 3px #444;
box-shadow: 3px 3px 0px #5b5843;
}

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

h3.footer_contact_tel{
width: 40%;
line-height: 1.4;
font-size:15px;
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: 44px;
font-weight: 400;
letter-spacing: 0.05em;

}

div.footer_contact{
width: 100%;
margin: 0px auto 15px auto;
display: flex;
align-items: center;
gap: 20px
}

h3.footer_contact_line{
font-size:20px
}

a.footer_contact{
width: calc(100% / 2 - 10px);
height: 80px;
border-radius: 10px;
display: flex;
align-items: center;
color: #fff;
padding: 0px 15px 0px 15px;
justify-content: space-between;
}

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

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

ol.contents {
width: 1000px;
margin: 0px auto;
font-size: 12px;
border-bottom: solid 1px #dcdcdc;
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: 900px;
margin: 0px auto 20px auto;
position: relative;
z-index: 1
}

ul.contact{
display: flex;
align-items: center;
font-size:15px;
}

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

li.contact_left{
width: 280px;
}

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

li.contact_right{
width: 620px;
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-weight: 500
}

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.privacy{
text-align: center;
font-size:34px;
background: url(../img/privacy/title.png) no-repeat right center;
background-size: auto 100px;
height: 100px;
position: relative;
z-index: 1;
line-height: 100px;
margin-bottom: 20px
}

h2.contact{
text-align: center;
font-size:34px;
background: url(../img/contact/title.png) no-repeat right center;
background-size: auto 100px;
height: 100px;
position: relative;
z-index: 1;
line-height: 100px;
margin-bottom: 20px
}

article.contents{
width: 900px;
margin-bottom: 50px;
}

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

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;
}