@charset "utf-8";

#mcontents .mf{
margin: 0 0 100px 0;
}
#mcontents .mf-frame{
background: #FBF7EF;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
#mcontents .mf-inner{
padding: 50px;
}


#mcontents .ttl{
padding: 90px 0 100px 0;
margin: 0 0 100px 0;
background: url("../img/menu/mf2bg.jpg") center center /cover no-repeat;
position: relative;
}
#mcontents .ttl:after{
content: "";
display: block;
max-width: 45px;
max-height: 45px;
width: 6vw;
height: 6vw;
background: url("../img/menu/ic-penki.png") center center /cover no-repeat;
position: absolute;
top: calc(100% + 20px);
}
#mcontents .ttl:before{
content: "";
height: 5px;
background: url("../img/menu/line.png") center center repeat-x;
position: absolute;
top: calc(100% + 40px);
left: 45px;
right: 0;
}
#mcontents h2{
display: table;
font-size: 1.75em;
font-weight: bold;
color: #fff;
border-bottom: #00A3CE solid 4px;
line-height: 1em;
margin: 0 auto;
padding: 0 0 20px 0;
}
#mcontents h2 img{
max-width: 47px;
max-height: 88px;
width: 6.27vw;
height: 11.73vw;
vertical-align: bottom;
margin: 0 0.5em 0 0;
}
#mcontents p.extend{
text-align: center;
font-size: 1.13em;
line-height: 2em;
}
#mcontents p.extend strong{
position: relative;
z-index: 9;

background-color: #FBF7EF;
  background-image:
  linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 50%, #92E2F7 50%);
  background-size: 100% 2em;
  line-height: 2em;
}
.cbox{
background: #fff;
margin: 50px 0 0 0;
position: relative;
}
.cbox-inner{
padding: 90px 150px;
}
.cbox-inner > ul{
display: flex;
justify-content: center;
background: #0AADD6;
padding: 10px 30px;
border-radius: 100px;
position: absolute;
left: 0;
right: 0;
top: -20px;
}
.cbox-inner > ul li{
border-right: #fff solid 1px;
}
.cbox-inner > ul li:last-of-type{
border: none;
}
.cbox-inner > ul a{
display: block;
color: #fff;
font-weight: bold;
font-size: 1.38em;
padding: 0 40px 0 10px;
line-height: 1em;
text-decoration: none;
position: relative;
}
.cbox-inner > ul a:after{
content: "";
max-width: 20px;
max-height: 15px;
width: 2.67vw;
height: 2vw;
background: url("../img/cmn/arr4.png") center center /cover no-repeat;
position: absolute;
right: 10px;
top: 50%;
transform: translate(0,-50%);
}
.cbox dl{
border-bottom: #0AADD6 dashed 5px;
padding: 60px 0 60px 260px;
position: relative;
}
.cbox dl:before{
content: "";
max-width: 200px;
max-height: 200px;
width: 26.67vw;
height: 26.67vw;
background: url("../img/menu/mf2i1.png") center center /cover no-repeat;
position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
}
.cbox dl dt{
font-size: 1.38em;
font-weight: bold;
color: #0AADD6;
margin: 0 0 20px 0;
}


.cboxs{
overflow: hidden;
margin: 30px 0 0 0;
}
.cboxs-inner{
padding: 20px 0;
}
.cboxs .clist{
margin: 30px 0 20px 0;
}
.cboxs .clist h3{
font-size: 1.38em;
font-weight: bold;
color: #0AADD6;
}
.cboxs .clist p{
margin: 0 0 0 1em;
}
.cboxs .clist a{
display: block;
background: #F0961C;
color: #fff;
font-size: 1.13em;
font-weight: bold;
text-decoration: none;
padding: 5px 15px;
border-radius: 5px;
line-height: 1em;
}

.cboxs ul{
margin: 30px 0 0 0;
padding: 0 0 20px 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.cboxs ul li{
display: inline-block;
margin: 0 50px 0 0;
position: relative;
}
.cboxs ul li:after{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 15px;
border-color: transparent transparent transparent #0F5E6C;
position: absolute;
top: 50%;
right: -30px;
transform: translate(0,-50%);
}
.cboxs ul li:last-of-type{
margin: 0;
}
.cboxs ul li:last-of-type:after{
display: none;
}

/*----------------------------*/

#mf1 .mf-inner{
padding: 20px;
text-align: center;
}
#mf1 p{
margin: 0 0 40px 0;
}
#mf1 ul{
width: 80%;
padding: 5%;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#mf1 ul li{
width: 45%;
}
#mf1 a{
text-align: left;
display: block;
padding: 25px 0 25px 60px;
margin: 0 0 40px 0;
font-size: 1.5em;
font-weight: bold;
color: #333;
background: #FBF7EF;
border-radius: 5px;
text-decoration: none;
position: relative;
transition: 0.3s;
}
#mf1 a:after{
content: "";
max-width: 40px;
max-height: 20px;
width: 2.67vw;
height: 2vw;
background: url("../img/cmn/arr4.svg") center center /contain no-repeat;
position: absolute;
left: 10px;
top: 50%;
transform: translate(0,-50%);
}

#mf1 a:hover{
color: #fff;
background-color: #0AADD6;
transition: 0.3s;
}

#mf1 a:hover:after{
background: url("../img/cmn/arr4-1.svg") center center /contain no-repeat;
}

#mf1 ul li:last-of-type a{
margin-bottom: 0;
}

#mf2 .ttl{
background-image: url("../img/menu/mf2bg.jpg");
}
#mf2koke:before{
background-image: url("../img/menu/mf2i1.png");
}
#mf2toso:before{
background-image: url("../img/menu/mf2i2.png");
}
#mf2hibi:before{
background-image: url("../img/menu/mf2i3.png");
}

#mf3 .ttl{
background-image: url("../img/menu/mf3bg.png");
}
#mf3hibi:before{
background-image: url("../img/menu/mf3i1.png");
}
#mf3chalk:before{
background-image: url("../img/menu/mf3i2.png");
}
#mf3koke:before{
background-image: url("../img/menu/mf3i3.png");
}
#mf3haga:before{
background-image: url("../img/menu/mf3i4.png");
}
#mf4 .ttl{
background-image: url("../img/menu/mf4bg.png");
}
#mf4haisui:before{
background-image: url("../img/menu/mf4i1.png");
}
#mf4nami:before{
background-image: url("../img/menu/mf4i2.png");
}
#mf4hibi:before{
background-image: url("../img/menu/mf4i3.png");
}
#mf4shoku:before{
background-image: url("../img/menu/mf4i4.png");
}
#mf4iroase:before{
background-image: url("../img/menu/mf4i5.png");
}
#mf5 .ttl{
background-image: url("../img/menu/mf5bg.png");
}
#mf5 a{
display: table;
background: #F0961C;
color: #fff;
font-size: 1.13em;
font-weight: bold;
text-decoration: none;
padding: 5px 15px;
margin: 30px auto 0 auto;
border-radius: 5px;
line-height: 1em;
}
#mf6 .ttl{
background-image: url("../img/menu/mf6bg.png");
}
#mf6 .cbox-inner {
	padding: 50px 100px;
}
#mf6 .cboxs{
margin: 0;
}

.cboxs ul {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 1rem;
list-style: none;
white-space: normal;
overflow-x: auto;
}

@media screen and (min-width: 801px) {
.cboxs ul {
	justify-content: center;
}
}

.cboxs ul li {
display: block;
flex-shrink: 0;
margin: 0;
}

.cboxs ul li img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}

.cboxs ul li.step-large {
width: 200px;
}

.cboxs ul li.step-small {
width: 140px;
text-align: center;
}

.cboxs ul li.step-small span {
display: block;
font-size: 1.1em;
font-weight: bold;
color: #0AADD6;
margin-bottom: 8px;
white-space: nowrap;
}

.cboxs ul li:after {
display: none;
}

.cboxs ul li:nth-child(1):after,
.cboxs ul li:nth-child(2):after,
.cboxs ul li:nth-child(3):after,
.cboxs ul li:nth-child(4):after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 15px;
border-color: transparent transparent transparent #0AADD6;
position: absolute;
top: 62%;
right: calc(-0.5rem - 8px);
transform: translate(0,-50%);
z-index: 1;
}

.cboxs ul li.step-small:nth-child(2):after,
.cboxs ul li.step-small:nth-child(3):after,
.cboxs ul li.step-small:nth-child(4):after {
top: auto;
bottom: 43%;
transform: translate(0, 50%);
}


@media screen and (max-width: 800px) {

.sp-disp{
text-align: center;
margin: 0 0 10vw 0;
}
.sp-disp img{
max-width: 190px;
width: 29.69vw;
}


#mcontents .mf{
margin: 0 5vw 10vw 5vw;
}
#mcontents .mf-inner{
padding: 5vw;
}


#mcontents .ttl{
padding: 5vw 0 8vw 0;
margin: 0 0 10vw 0;
}
#mcontents .ttl:after{
top: calc(100% + 2.67vw);
}
#mcontents .ttl:before{
top: calc(100% + 5.33vw);
left: 6vw;
}
#mcontents h2{
font-size: 1.5em;
padding: 0 0 2vw 0;
}
#mcontents h2 img{
vertical-align: bottom;
margin: 0 0.5em 0 0;
}
#mcontents .ttl +p{
text-align: left;
}


.cbox{
margin: 10vw 0 0 0;
}
.cbox-inner{
padding: 5vw 0;
}
.cbox-inner > ul{
position: relative;
flex-wrap: wrap;
padding: 3vw 2vw 2vw 2vw;
border-radius: 3vw;
top: -10vw;
}
.cbox-inner > ul li{
margin: 0 2vw 3vw 0;
border: none;
}

.cbox-inner > ul a{
font-size: 1em;
padding: 0 1.2em 0 0;
}
.cbox-inner > ul a:after{
right: 0;
}
.cbox dl{
padding: 8vw 0;
margin: 0 5vw;
}
.cbox dl:before{
display: table;
margin: 0 auto 2vw auto;
position: static;
transform: translate(0,0);
}
.cbox dl dt{
margin: 0 0 2vw 0;
}


.cboxs{
margin: 3vw 0 0 0;
}
.cboxs-inner{
padding: 4vw 5vw;
}
.cboxs .clist{
margin: 0 0 3vw 0;
}
.cboxs .clist h3{
font-size: 1.2em;
margin: -15vw 0 0 0;
padding: 15vw 0 0 0;
}
.cboxs .clist p {
	margin: 0 0 0 0.5em;
}
.cboxs .clist a{
font-size: 1em;
padding: 1vw 2vw;
}

.cboxs ul{
margin: 3vw 0 0 0;
padding: 0 0 3vw 0;
}
.cboxs ul li{
max-width: 240px;
width: 32vw;
margin: 0 5vw 0 0;
}
.cboxs ul li:after{
border-width: 2.67vw 0 2.67vw 2vw;
right: -4vw;
}


/*----------------------------*/

#mf1 .mf-inner{
padding: 3vw;
}
#mf1 p{
margin: 0 0 3vw 0;
}
#mf1 ul{
width: auto;
flex-wrap: wrap;
justify-content: center;
}
#mf1 ul li{
margin: 1vw;
width: 100%;
}
#mf1 a{
padding: 2vw 7vw 2vw 3vw;
padding-left: 40px;
margin: 0 0 2vw 0;
font-size: 1em;
}
#mf1 a:after{
left: 2vw;
width: 20px;
height: 13px;
}

#mf5 a{
padding: 1vw 2vw;
margin: 5vw auto 0 auto;
}
#mf6 .cbox-inner {
	padding: 5vw 0;
}

.cboxs ul {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 20px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

.cboxs ul:after {
display: none;
}

.cboxs ul li {
max-width: none;
width: auto;
}

.cboxs ul li.step-small span {
font-size: 0.75em;
}

.cboxs ul li:nth-child(1):after,
.cboxs ul li:nth-child(2):after,
.cboxs ul li:nth-child(3):after,
.cboxs ul li:nth-child(4):after {
border-width: 6px 0 6px 8px;
right: -14px;
}

ul::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
}
}