@charset "utf-8";

/*
-----------------------------------------------
▼基本デザイン 2023.10
----------------------------------------------- */

* {
box-sizing:border-box;
margin:0;
padding:0;
border:0;
outline:0;
font-style:normal;
word-break:normal;
word-wrap:break-word;
}

html {
font-size: 62.5%;
}

body {
font-size: 1.5rem;
}


body {
-webkit-text-size-adjust:100%;
font-family: 'Noto sans JP', serif;
line-height:1.7;
-webkit-font-smoothing:subpixel-antialiased;
}

small {
font-size:80%;
}
article,aside,figure,footer,header,main,menu,nav,section {
display:block;
}
audio,canvas,video {
display:inline-block;
}
img {
vertical-align:bottom;
}
input,select {
font-size:100%;
vertical-align:middle;
}
ul,ol {
list-style-type:none;
}
h1,h2,h3,h4,h5,h6,strong {
-webkit-font-smoothing:antialiased;
}
table {
border-collapse:collapse;
border-spacing:0;
}

a {
text-decoration:none;
}

a:hover,a:active {
text-decoration:underline;
}
a img {
transition:opacity 0.5s ease-in-out;
}
a:hover img {
opacity:0.8;
}


.pconly{
display:none;
@media screen and (min-width: 600px) {
display:none;
}
@media screen and (min-width: 1025px) {
display:block;
}
}

.pcten{
display:none;
@media screen and (min-width: 600px) {
display:none;
}
@media screen and (min-width: 1025px) {
display:inline;
}
}

.sponly{
display:block;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
display:none;
}
}

.tac-all{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/*
-----------------------------------------------
flex
----------------------------------------------- */
.container01{
display:flex;
flex-wrap:wrap;
}

.container02{
display:flex;
flex-wrap:nowrap;
}

.container03{
display:flex;
flex-wrap:wrap-reverse;
}

.al-item01{
align-items:flex-end
}

.c-type01{
justify-content:space-between;
}

.c-type02{
justify-content:space-around;
}

.c-type03{
justify-content:flex-start;
}

.c-type04{
justify-content:center;
}

.ai-01{align-items:flex-start;}
.ai-02{align-items:flex-end;}
.ai-03{align-items:center;}
.ai-04{align-items:baseline;}
.ai-04{align-items:stretch;}

/*
-----------------------------------------------
▼全体
----------------------------------------------- */
body{
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
}
}

.mx-img{
width:auto;
height:auto;
max-width:100%;
}

/*
-----------------------------------------------
▼ヘッダー
----------------------------------------------- */
header {
	position: fixed;
	width: 100%;
	text-align: center;
	background-color: #fff;
	transition: .3s;
	background:#fff;
	z-index:50;
}






/*
-----------------------------------------------
▼TOPページ
----------------------------------------------- */
.top_area{
background-color:#80cce6;
background-image:url(../img/top_area_bg.png);
background-repeat:no-repeat;
background-size:contain;
padding:5% 9% 10%;
background-position:top center;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
padding:5% 9% 5%;
}
}

.top_area .div01{
padding-left:4%;
padding-right:4%;
@media screen and (min-width: 600px) {
padding:0;
}
@media screen and (min-width: 1025px) {
padding:0;
}
}


.top_area h2{
margin-bottom:4%;
}

.top_area p{
margin-bottom:4%;
}

.sp-foot-btn{
background:#004892;
}

.fixed{
display:block;
position: fixed;
bottom: 0;
left: 0;
right:0;
z-index:35;
@media screen and (min-width: 600px) {
position: relative;
}
@media screen and (min-width: 1025px) {
position: relative;
z-index:5;
}
}

.main_area01{
background-color:#ffe200;
padding:5% 5%;
border-bottom:solid 4px #004892;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
padding:3.5% 5%;
border-bottom:solid 6px #004892;
}
}




.main_area01 h2{
margin-bottom:2%;
}

.txt_box{
text-align:left !important;
}

.main_area02{
background-color:#dbf0f7;
padding:5% 5%;
border-bottom:solid 4px #004892;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
padding:3.5% 5%;
border-bottom:solid 6px #004892;
}
}


.main_area02 h2{
margin-bottom:6%;
}


.main_area03{
background-color:#e7d5e8;
padding:3% 5%;
border-bottom:solid 4px #004892;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
padding:3.5% 5%;
}
}

.main_area03 h2{
margin-bottom:6%;
}


.main_area04{
background-color:#fff;
padding:0 0 0 3%;
overflow:hidden;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
padding:0 5% 3% 5%;
}
}



.main_area04 .div01,
.main_area04 .div02,
.main_area04 .div03{
width:106%;
margin-left:-3%;
position:relative;
}

.main_area04 .div01{
margin-bottom:3%;
}


.main_area04 .div02{
margin-top:-6%;
margin-bottom:4%;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
margin-top:-4%;
margin-bottom:4%;
}
}



.main_area04 .div03{
margin-bottom:3%;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
margin-bottom:0;
}
}



.info_ul li{
margin-left:1em;
}

.info_ul li:before{
content:"※";
margin-left:-1em;
}

.info_wrap{
width:100%;
margin-left:auto;
margin-right:auto;
font-size:16px;
padding-left:8%;
padding-right:8%;
margin-bottom:170px;
@media screen and (min-width: 600px) {
width:600px;
padding-left:0;
padding-right:0;
margin-bottom:40px;
}
@media screen and (min-width: 1025px) {
margin-bottom:50px;
width:700px;
font-size:18px;
padding-left:0;
padding-right:0;
}
}




footer{
display:none;
@media screen and (min-width: 600px) {
display:block;
background:#fbf7c9;
padding:3% 5%;
}
@media screen and (min-width: 1025px) {
}
}



footer .div01{
margin-bottom:2%;
}



/*
-----------------------------------------------
▼スマホの時だけ電話発信
----------------------------------------------- */
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

/*
-----------------------------------------------
▼ページTOPボタン
----------------------------------------------- */
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 40px;
	height: 40px;
	transition:all 0.3s;
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1025px) {
	width: 60px;
	height: 60px;
}
}


#page-top img{
opacity:0.9 !important;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:140px;
	z-index: 10;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
@media screen and (min-width: 600px) {
	right: 20px;
	bottom:20px;
}
@media screen and (min-width: 1025px) {
	right: 20px;
	bottom:20px;
}
}


/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}




/* css_end */