@charset "utf-8";
body {
	font-family: 'Hind','Oswald', sans-serif;
	font-family: 'Noto Sans JP';
	text-align: left;
	color:#000;
	text-align: justify;
	overflow-x: hidden;
	line-height: 1.7;
	font-weight: 400;
	color: #333;
	font-size:15px;
	font-display: swap;
}


@font-face {
font-family: 'Noto Sans JP';
src: url('../font/notosans_medium.woff') format('woff');
font-weight: 500;
font-display: swap;
}

@font-face {
font-family: 'Noto Sans JP';
src: url('../font/notosans_regular.woff') format('woff');
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: 'Noto Sans JP';
src: url('../font/notosans_bold.woff') format('woff');
font-weight: 700;
font-display: swap;
}

@font-face {
font-family: 'Hind';
src: url('../font/hind_regular.woff') format('woff');
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: 'Hind';
src: url('../font/hind_semibold.woff') format('woff');
font-weight: 600;
font-display: swap;
}

@font-face {
font-family: 'Oswald';
src: url('../font/oswald_regular.woff') format('woff');
font-weight: 400;
font-display: swap;
} 

body .sp-item {
    display: none !important; }
  body .pc-item {
    display: block !important; }



  @media screen and (max-width : 600px ){
    body {
      min-width: inherit;
	  height:100%;
		padding-bottom: 0;
	  }
      body .sp-item {
        display: block !important; }
      body .pc-item {
        display: none !important; }
	  body .sp-item img {
		width:100%;}
}


a.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.center {
	text-align: center;
}

img {
	line-height: 0;
	padding: 0;
	margin: 0;
}

/* ここから書いていきましょう */
/*========= ナビゲーションのためのCSS ===============*/
/* Header */
/* ----------------------------------------------------- */
header {
	border-bottom: 1px solid #ccc;
}
.logo{
	width: 250px;
	padding: 20px;
}
.logo img{
	width: 100%;
}
.main{
	background: #003366;
	padding: 30px 0;
}
.main h1{
	font-size: 50px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 20px;
}
.main h1 span{
	font-size: 30px;
}
.main h1 .yellow{
	font-size: 30px;
	color: #ffff33;
}
.main ul {
	display: flex;
	width: 80%;
	margin: 0 auto;
	justify-content: center;
}
.main_txt{
	width: 700px;
	margin: 0 auto;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	padding: 10px 0;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
}
.main li{
	text-align: center;
	background: #e8ecef;
	padding: 10px 15px;
	line-height: 1.4;
	font-weight: bold;
	font-size: 20px;
	border-radius: 8px;
	margin: 0 8px;
	color:#003366;
}
.button a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto 0;
    max-width: 500px;
    padding: 10px 25px;
    color: #fff;
	font-weight: bold;
	font-size: 22px;
    text-decoration: none;
    line-height: 1.8;
    transition: 0.3s ease-in-out;
    background: #ff6666;
    border-radius: 9999px;
    border-bottom: 2px solid #999;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
}
.button a:hover {
    color: #fff;
    background: #cc3333;
    border-bottom: 2px solid #fff;
    transform: translateY(3px);
}
body{
    vertical-align:middle; 
}

@media screen and (max-width : 600px ){
.logo{
	width: 50%;
	padding: 10px;
}
.logo img{
	width: 100%;
}
}

.shiny-btn3 {
    display: block;
    position: relative;
    padding: 0;
    overflow: hidden;
}
.shiny-btn3:hover {
    opacity: 0.7;
}
.shiny-btn3::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn3 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn3 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.s-btn {
	display: none;
}
@media screen and (max-width : 600px ){
	.main{
	background: #003366;
	padding: 30px 0;
}
.main h1{
	font-size: 40px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 20px;
}
.main h1 span{
	font-size: 18px;
}
.main ul {
	display: flex;
	width: 95%;
	margin: 0 auto;
	justify-content: center;
}
.main_txt{
	width: 90%;
	margin: 0 auto;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	padding: 10px 0;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
}
.main li{
	text-align: center;
	background: #e8ecef;
	padding: 10px 6px;
	line-height: 1.4;
	font-weight: bold;
	font-size: 17px;
	border-radius: 5px;
	margin: 0 4px;
	color:#003366;
}
.button a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto 0;
    max-width: 92%;
    padding: 10px 25px;
    color: #fff;
	font-weight: bold;
	font-size: 18px;
    text-decoration: none;
    line-height: 1.8;
    transition: 0.3s ease-in-out;
    background: #ff6666;
    border-radius: 9999px;
    border-bottom: 2px solid #999;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
}
.button a:hover {
    color: #fff;
    background: #cc3333;
    border-bottom: 2px solid #fff;
    transform: translateY(3px);
}
}

.contents {
	min-width: 950px;
}

.tokutyou {
  /* 方眼紙模様に必須のスタイル */
	max-width: 800px;
	
 
	text-align: center;
	padding: 40px 0 50px;
	margin: 20px auto 50px;
}
.tokutyou_wrap{
	width: 880px;
	margin: 0 auto;
	display: flex;
	justify-content:  space-between;
}
.tokutyou p{
	font-weight: bold;
	font-size: 20px;
	color: #003366;
}


.t_box{
	width: 100%;
	box-sizing: border-box;
	padding: 0 13px 13px;
}

.t_box ul{
	display: block;
	width: 100%;
	text-align: left;
	margin: 7px 0 0;
}
.t_box li{
	background: url("../images/check.png") no-repeat;
	background-position: 0 6px;
font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;	
	padding: 0 0 0 23px;
}

@media screen and (max-width : 600px ){
	.contents {
	min-width: 100%;
}

	.tokutyou {
	min-width: 90%;
	text-align: center;
	padding: 25px 0 5px;
	margin: 20px 0 40px;
}
	.tokutyou p{
	font-weight: bold;
	font-size: 16px;
	color: #003366;
		width: 95%;
		margin: 0 auto;
}

	.tokutyou h3 img{
		width: 80%;
	}
		
	.tokutyou_wrap{
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.t_box{
	width: 100%;
	padding: 0 13px 13px;
}
.t_box h4{
	text-align: center;
	margin: -20px 0 8px;
	font-size: 6vw;
	color: #18434b;
	font-weight: 600;
	line-height: 1.5
}
.t_box ul{
	display: block;
	width: 100%;
	text-align: left;
	margin: 7px 0 0;
}
.t_box li{
	background: url("../images/check.png") no-repeat;
	background-position: 0 6px;
	font-weight: 500;
	margin-bottom: 10px;	
	padding: 0 0 0 23px;
}
	
}
.service_in{
	width: 750px;
	margin: 0 auto;
}
.service_in img{
	width: 100%;
}
h2{
	text-align: center;
	font-size: 19px;
	color: #adc6d8;
	font-family: 'Hind', sans-serif;
	font-weight: 600;
	line-height: 1;
	margin: 0 0 55px;
	font-family: 'Noto Sans JP', sans-serif;
}
h2 span {
	text-align: center;
	font-family: 'notosans', sans-serif;
	font-size: 31px;
	font-weight: 700;
	color: #333;
	line-height: 1.6;
	padding: 0 3px 8px;
	border-bottom: 5px solid #adc6d8;
}
.about_aga{
	min-width: 100%;
	background: url("../images/aga_bg.png");
	background-size: 100% auto;
	padding: 20px 0 40px;
	text-align: center;
}
.tokutyou h3{
	margin-bottom:35px;
}
.reason h3{
	margin-bottom:30px;
}
.reason{
	min-width: 100%;
	background:#eaf1f9;
	padding: 40px 0 50px;
	text-align: center;
	margin: 0 0 60px;
}
.reason_wrap{
	width: 870px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.r_box{
	width: 278px;
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 12px 18px 20px;
	text-align:left;
}
.r_box img{
	width:80%;
	display:block;
	margin:0 auto 10px;
}
.r_box h4{
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color:#003366;
	margin-bottom:5px;
}

@media screen and (max-width : 600px ){
	.reason h3{
	margin-bottom:25px;
}
	.reason h3 img{
		width: 90%;
	}
.reason{
	min-width: 100%;
	padding: 20px 0 10px;
	text-align: center;
	margin: 0 0 65px;
}
.reason_wrap{
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.r_box{
	width: 100%;
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 12px 18px 20px;
	text-align:left;
	margin-bottom: 20px;
}
.r_box p img{
	width:60%;
	display:block;
	margin:0 auto 10px;
}
.r_box h4{
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom:5px;
}

}
.moukon{
	border: #52927c 6px solid;
	border-radius:10px;
	width: 750px;
	margin: 0 auto 40px;
	padding: 0 0 40px;
}
.moukon h3{
	margin: -255px 0 20px 0;
}
.moukon p {
	width: 90%;
	margin: 20px auto 0;
	text-align: left;
}
.taisaku {
	min-width:950px; 
	padding: 0 0 70px;
	margin-bottom: 15px;
}
.taisaku h2 {
	margin: 0 0 20px;
}


.merit{
	width: 750px;
	margin:40px auto;
}
.merit h3{
	font-size: 21px;
	font-weight: bold;
	color: #003366;
	margin-bottom: 10px;
}

.merit_box{
	width: 100%;
	margin: 0 auto 30px;
	display: flex;
	justify-content: space-between;
}
.merit_box p {
  tpadding-left: 1em;  /* 全体を右へ1文字ずらす */
  text-indent: -1em; /* 1行目だけを左へ戻す */
margin-left:1em;
}
.merit_box_txt{
	width: 470px;
	color: #000;
	font-size: 17px;
}
.merit_box_pic{
	width: 245px;
}
.merit_box_pic img{
	width: 100%;
}
.taisaku2_wrap {
	min-width: 950px;
}
.taisaku2{
	max-width: 750px;
	margin: 0 auto;
}
.taisaku2 img{
	width: 100%;
}
.taisaku2_pic{
	width: 76%;
	margin: 0 auto;
}
.taisaku3 {
  /* 方眼紙模様に必須のスタイル */
	min-width: 950px;
 background-color : #e7fbec;
  background-image :

    repeating-linear-gradient(to bottom,          /* 横線 */
       transparent 13px,
       rgba(203, 203, 203, 0.21) 14px,  rgba(203, 203, 203, 0.21) 14px,
       transparent 15px,  transparent 27px, 
       rgba(203, 203, 203, 0.21) 28px,  rgba(203, 203, 203, 0.21) 28px,
       transparent 29px,  transparent 41px, 
       rgba(203, 203, 203, 0.21) 42px,  rgba(203, 203, 203, 0.21) 42px,
       transparent 43px,  transparent 55px, 
       rgba(203, 203, 203, 0.21) 56px,  rgba(203, 203, 203, 0.21) 56px,
       transparent 57px,  transparent 69px, 
       rgba(203, 203, 203, 0.21) 70px,  rgba(203, 203, 203, 0.21) 70px),

    repeating-linear-gradient(to right,          /* 縦線 */
       transparent 13px,
       rgba(203, 203, 203, 0.21) 14px,  rgba(203, 203, 203, 0.21) 14px,
       transparent 15px,  transparent 27px, 
       rgba(203, 203, 203, 0.21) 28px,  rgba(203, 203, 203, 0.21) 28px,
       transparent 29px,  transparent 41px, 
       rgba(203, 203, 203, 0.21) 42px,  rgba(203, 203, 203, 0.21) 42px,
       transparent 43px,  transparent 55px, 
       rgba(203, 203, 203, 0.21) 56px,  rgba(203, 203, 203, 0.21) 56px,
       transparent 57px,  transparent 69px, 
       rgba(203, 203, 203, 0.21) 70px,  rgba(203, 203, 203, 0.21) 70px);

	text-align: center;
	padding: 50px 0 50px;
	margin: 0 0 0;
}
.taisaku3 h3{
	margin-top: 0;
}
.taisaku3_box{
	width: 750px;
	margin: 0 auto;
	background: #fff;
	box-sizing: border-box;
	text-align: center;
	padding: 15px 0 20px;
	border-radius: 10px;
}
.taisaku3_box img{
	width: 90%;
}
.taisaku2_ttl{
	text-align: center;
	margin: 17px 0 -46px;
}

@media screen and (max-width : 600px ){
	.moukon{
	border: #52927c 6px solid;
	border-radius:10px;
	max-width: 92%;
	margin: 0 auto 50px;
	padding: 0 0 20px;
}
.moukon h3{
	margin: -43% 0 5px 0;
}
	.moukon img{
		width: 92%;
	}
.moukon p {
	width: 90%;
	margin: 0 auto 0;
	text-align: left;
}
.taisaku {
	min-width: 100%;
	padding: 0 0 15px;
	margin-bottom: 15px;
}
.taisaku h2 {
	margin: -30px 0 20px;
}
	.taisaku h2 img{
		width: 86%;
	}
.merit{
	width: 90%;
	margin:0 auto;

}
.merit_box{
	width: 98%;
	margin: 0 auto 30px;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}
.merit_box_txt{
	width: 100%;
	color: #000;
	font-size: 17px;
}
.merit_box_pic{
	width: 90%;
	margin: 0 auto 10px;
}

.merit h3{
	font-size: 18px;
	font-weight: bold;
	color: #003366;
	margin-bottom: 10px;
}
.taisaku2{
	max-width: 750px;
	margin: 0 auto;
}
.taisaku2 img{
	width: 100%;
}
.taisaku2_pic{
	width: 90%;
	margin: 0 auto;
}
.taisaku3 {
	min-width: 100%;
	text-align: center;
	padding: 30px 0 20px;
	margin: 0 0 30px;
}
	.taisaku3 img{
		width: 90%;
	}
.taisaku3 h3{
	margin: 0 0 5px;
}
.taisaku3_box{
	width: 94%;
	margin: 0 auto;
	background: #fff;
	box-sizing: border-box;
	text-align: center;
	padding: 5px 0 20px;
	border-radius: 10px;
}
.taisaku3_box img{
	width: 94%;

}
.taisaku2_ttl{
	text-align: center;
	margin: 10px 0 -26px;
}
	.taisaku2_ttl img{
		width: 100%;
	}
.taisaku2_wrap {
	min-width: 100%;
}
	
}
.evidence{
	text-align: center;
	margin: 40px 0;
}

.evidence_box ul{
	text-align: left;
	display: block;
}
.evidence_box li{
	padding-left:1em;
	text-indent:-1em;
	font-size: 17px;
}
@media screen and (max-width : 600px ){
	.evidence{
	text-align: center;
	margin: 25px 0;
}
	.evidence img{
		width: 90%;
	}
.evidence_box{
	width: 90%;
	margin: 12px auto 23px;
	border: 1px solid #52927c;
	background: #ffffcc;
	padding: 12px 0;
	box-sizing: border-box;
	border-radius: 5px;
}
.evidence_box ul{
	text-align: left;
	display: block;
	width: 90%;
}
.evidence_box li{
	padding-left:1em;
	text-indent:-1em;
	font-size: 17px;
}
}
.service {
	padding: 40px 0;
	background: #fcf7ed;
	min-width: 950px;
}
.service_taisakutaisaku{
	width: 750px;
	margin: 0 auto 40px;
	display: flex;
	justify-content: space-between;
}
.service_use p{
	text-align: center;
	margin-bottom: 5px;
}
.service_use_box{
	width: 220px;
	font-size: 17px;
	font-feature-settings: "palt";
	letter-spacing: 1px;
}
.service_use_box2{
	width: 220px;
	font-size: 17px;
	font-feature-settings: "palt";
	letter-spacing: 1px;
}
.service_use h3{
	font-size: 19px;
	color: #000;
	font-weight: 600;
	text-align: center;
	margin-bottom: 5px;
}
@media screen and (max-width : 600px ){
	.use{
		min-width: 100%;
	}
	.service {
	padding: 30px 0 20px;
	background: #fcf7ed;
	min-width: 100%;
}
.service_use{
	width: 90%;
	margin: 0 auto 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.service_use p{
	text-align: center;
	margin-bottom: 5px;
}
.service_use_box{
	background: #fff;
	padding: 3% 4%;
	box-sizing: border-box;
	border-radius: 5px;
	margin: 0 0 20px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	font-feature-settings: "palt";
	letter-spacing: 1px;
	line-height: 1.6;
	align-items: center;
	box-shadow: 0px 0px 5px 0px rgba(141, 138, 138, 0.35);
}
.service_use_box2{
	background: #fff;
	padding: 3% 4%;
	box-sizing: border-box;
	border-radius: 5px;
	margin: 0 0 20px;
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	font-size: 15px;
	font-feature-settings: "palt";
	letter-spacing: 1px;
	line-height: 1.6;
	align-items: center;
	box-shadow: 0px 0px 5px 0px rgba(141, 138, 138, 0.35);
}
	.service_use .use_p{
		width: 40%;
	}
	.service_use .use_p img{
		width: 100%;
	}
	.service_use .use_txt{
		width: 55%;
	}
.service_use h3{
	font-size: 4.5vw;
	color: #000;
	font-weight: 600;
	text-align: left;
	margin-bottom: 0;
}
}


@media screen and (max-width : 600px ){
	.about {
	background: #faf8f6;
	text-align: center;
	padding: 30px 0;
	margin: 0 0 40px;
}
	h2{
	text-align: center;
	font-size: 16px;
	font-family: 'Hind', sans-serif;
	font-weight: 600;
	line-height: 1;
	margin: 0 0 32px;
	font-family: 'Noto Sans JP', sans-serif;
}
h2 span {
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
	padding: 0 3px 2px;
	border-bottom: 4px solid #adc6d8;
}

.service_in{
	width: 96%;
	margin: 0 auto;
}
.about {
	text-align: center;
	margin: 0 0 30px;
}

}

.use {
	text-align: center;
	min-width: 950px;
}
.step_ttl{
	width: 750px;
	margin: 0 auto 5px;
	display: flex;
	align-items: center;
	
}
.no {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 72px;
	color: #aad2d7;
	line-height: 1;
}
.ttl {
	font-size: 32px;
	color: #437281;
	font-weight: 700;
	margin-left: 5px;
}
.price_box{
	width: 750px;
	margin: 12px auto 10px;
	color: #cc3333;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
	background: #ffffff;
	padding: 15px 18px;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 0px rgba(141, 138, 138, 0.35);
}
.price_box_txt{
	font-size: 15px;
	font-weight: normal;
	color: #333333;
	text-align: left;
	width: 700px;
	margin: 0 auto 30px;
}
.cal{
	background: #f7f8f9;
	padding: 50px 0 60px;
}
.cal_box{
	width: 750px;
	margin: 0 auto 30px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 5px 0px rgba(141, 138, 138, 0.35);
	padding: 20px 25px;
	border-top: #003366 5px solid;
	box-sizing: border-box;
}
.cal_box2{
	margin: 15px 0 0;
	background: #f7f8f9;
	border-radius: 6px;
	padding: 10px 15px;
}
.cal_box h2{
 font-size: 20px;
	font-weight: bold;
	color: #003366;
	text-align: left;
	margin: 15px 0;
}
.cal_txt {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.main_step {
	margin: 0 auto 25px;
	text-align: center;
	padding: 30px 0 30px;
	box-sizing: border-box;
	border-top:5px solid #f1f3f1; 
	min-width: 950px;
}
.main_step img {
	width: 750px;
}
.btn_area img{
	width: 100%;
}
.btn_area{
	width: 830px;
	height: 370px;
	margin: 0 auto;
	position: relative;
}
.step img {
	width: 60%;
}
.btn_c {
	position: absolute;
	width: 84%;
	bottom: 8.8%;
	left: 8%;
}


@media screen and (max-width : 600px ){
	.price_box{
	width: 94%;
	margin: 12px auto 10px;
	color: #cc3333;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	background: #ffffff;
	padding: 15px 10px;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 0px rgba(141, 138, 138, 0.35);
}
	.price_box_txt{
	font-size: 15px;
	font-weight: normal;
	color: #333333;
	text-align: left;
	width: 90%;
	margin: 0 auto 20px;
}
.cal{
	padding: 40px 0 40px;
}
.cal_box{
	width: 94%;
	margin: 0 auto 30px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 5px 0px rgba(141, 138, 138, 0.35);
	padding: 20px 15px;
	border-top: #003366 5px solid;
	box-sizing: border-box;
}
.cal_box2{
	margin: 15px 0 0;
	background: #f7f8f9;
	border-radius: 6px;
	padding: 10px 15px;
}
.cal_box h2{
 font-size: 20px;
	font-weight: bold;
	color: #003366;
	text-align: left;
	margin: 15px 0;
}
.cal_txt {
	width: 90%;
	margin: 0 auto;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

}
.step p {
	margin-top: 10px;
}
.staf {
	background: #EDF7F8;
	width: 50%;
	padding: 0 0 26px;
}
.staf h4 {
	background: #51849A;
	color: #fff;
	font-weight: 600;
	font-size: 20px;
	padding: 8px 0;
	margin-bottom: 10px;
}
.custmer {
	background: #FCF5EB;
	width: 50%;
	padding: 0 0 26px;
}

.custmer h4 {
	background: #FF9800;
	color: #fff;
	font-weight: 600;
	font-size: 20px;
	padding: 8px 0;
	margin-bottom: 10px;
}
.arrow img {
	width: 25%;
}

@media screen and (max-width : 600px ){
.arrow img {
	width: 40%;
}
	.step_ttl{
	width: 90%;
	margin: 0 auto 5px;
	display: flex;
	align-items: center;
	
}
.no {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 56px;
	color: #aad2d7;
	line-height: 1;
}
.ttl {
	font-size: 26px;
	color: #437281;
	font-weight: 700;
	margin-left: 5px;
}
	.step {
	width: 90%;
	display: flex;
	margin: 0 auto 5px;
	text-align: center;
	font-size: 4vw;
	line-height: 1.4;
	font-weight: 500;
}
	.step img {
	width: 70%;
}
.step p {
	margin-top: 10px;
}
.staf {
	background: #EDF7F8;
	width: 50%;
	padding: 0 0 20px;
}
.staf h4 {
	background: #51849A;
	color: #fff;
	font-weight: 600;
	font-size: 19px;
	padding: 8px 0;
	margin-bottom: 10px;
}
.custmer {
	background: #FCF5EB;
	width: 50%;
	padding: 0 0 20px;
}

.custmer h4 {
	background: #FF9800;
	color: #fff;
	font-weight: 600;
	font-size: 19px;
	padding: 8px 0;
	margin-bottom: 10px;
}
.use{
	min-width: 100%;
}
.use img{
	width: 100%;
}
}


.medicine{
	margin-bottom: 24px;
}
.price{
	padding: 40px 0 50px;
	min-width: 950px;
}
.price p{
	text-align: center;
	margin-bottom: 10px;
}
.price_in{
	width: 750px;
	margin: 20px auto;
	font-size: 16px;
}
.price h3{
	background: #f9f9f9;
	text-align: center;
	padding: 4px 0;
	margin-bottom: 15px;
	font-weight: 600;
	color: #666;
	border-top:#eee 1px solid; 
	border-bottom:#eee 1px solid; 
	font-size: 22px;
}

.price_tyuui{
	width: 750px;
	margin: 30px auto;
	font-size: 16px;
	background: #efefef;
	border: 1px solid #ccc;
	padding: 15px 20px;
	border-radius: 5px;
}
.price_tyuui p{
	text-align: left;
}

.price_in img{
		width: 100%;

}

.price_in dl {
  display: flex;
  flex-wrap: wrap;
}
.price_in dl dt {
  width: 3em;
}
.price_in dl dd {
width: 93%;
}
.price_in img{
		width: 100%;

}

@media screen and (max-width : 600px ){
	.price h3{
	background: #f9f9f9;
	text-align: center;
	padding: 4px 0;
	margin-bottom: 10px;
	font-weight: 600;
	color: #666;
	border-top:#eee 1px solid; 
	border-bottom:#eee 1px solid; 
	font-size: 20px;
}
	.price{
	min-width:100%; 
	padding: 20px 0 20px;
}

	.price_in{
	width: 90%;
	margin: 0 auto;
}
	.price_tyuui{
	width: 90%;
	margin: 30px auto;
	font-size: 16px;
	background: #efefef;
	border: 1px solid #ccc;
	padding: 15px 20px;
	border-radius: 5px;
}
.price_tyuui p{
	text-align: left;
}


.price_in dl {
  display: flex;
  flex-wrap: wrap;
	font-size: 16px;
}
.price_in dl dt {
  width: 10%;
}
.price_in dl dd {
width: 90%;
}
.price_in img{
		width: 100%;

}
.medicine{
	margin-bottom: 15px;
}
}
.doctor{
	padding: 40px 0 50px;
	font-size: 16px;
	min-width: 950px;
}
.doctor h3{
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 1px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
	margin-bottom: 20px;
}
.doctor h3 span{
	font-size: 16px;
}
.doctor_cont{
	width: 750px;
	margin: 0 auto;
}
.doctor_cont dl {
  display: flex;
  flex-wrap: wrap;
	letter-spacing: 2px;
}
.doctor_cont dl dt {
  width: 20%;
}
.doctor_cont dl dd {
  width: 80%;
}
.doctor_in{
	width: 750px;
	margin: 0 auto 30px;
	display: flex;
	justify-content: space-between;
}
.doctor_history{
	width: 100%;
	padding-left: 17px;
	box-sizing: border-box;
	margin-bottom: 30px;
}
.aim {
	font-size: 19px;
	font-weight: 500;
	margin-bottom: 10px;
}
.doctor h4{
	font-size: 24px;
	color: #fff;
	background: #52927c;
	width: 750px;
	font-weight: 500;
	letter-spacing: 1px;
	margin: 0 auto 20px;
	text-align: center;
	padding: 3px 0;
}
.doctor h5{
	font-size: 20px;
	color: #003366;
	font-weight: 600;
	letter-spacing: 4px;
	margin: 0 auto 10px;
	padding: 3px 0 4px 10px;
	border-bottom: 1px solid #ccc;
	border-left: 5px solid #003366;
}
.doctor_pic{
	width: 204px;
}
.doctor_pic img{
	width: 100%;
}
.doctor_txt{
	width: 520px;
}
.clinic{
	width: 750px;
	border: 1px solid #52927c;
	box-sizing: border-box;
	padding-bottom: 25px;
	letter-spacing: 2px;
}
.clinic h6{
	background: #f1f6f6;
	color: #52927c;
	font-weight: 600;
	text-align: center;
	margin-bottom: 23px;
	padding: 8px 0;
	font-size: 22px;
}
.clinic_in {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.clinic_pic {
	width: 315px;
}
.clinic_txt {
	width: 320px;
}

@media screen and (max-width : 600px ){
.doctor{
	padding: 30px 0 40px;
	min-width: 100px;
}
.doctor h3{
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 1px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
	margin-bottom: 20px;
	text-align: center;
}
.doctor h3 span{
	font-size: 16px;
}
.doctor_cont{
	width: 90%;
	margin: 0 auto;
}
.doctor_cont dl {
  display: flex;
  flex-wrap: wrap;
	letter-spacing: 2px;
}
.doctor_cont dl dt {
  width: 35%;
}
.doctor_cont dl dd {
  width: 65%;
}
.doctor_in{
	width: 100%;
	margin: 0 auto 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.doctor_history{
	width: 100%;
	padding-left: 15px;
	box-sizing: border-box;
	margin-bottom: 30px;
}
.aim {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;
}
.doctor h4{
	font-size: 22px;
	color: #fff;
	background: #52927c;
	width: 100%;
	font-weight: 500;
	letter-spacing: 1px;
	margin: 0 auto 20px;
	text-align: center;
	padding: 3px 0;
}
.doctor h5{
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0px;
	margin: 0 auto 10px;
	padding: 1px 0 2px 10px;
	border-bottom: 1px solid #ccc;
	border-left: 5px solid #003366;
	box-sizing: border-box;
}
.doctor_pic{
	width: 60%;
	display: block;
	margin: 0 auto 10px;
}
.doctor_pic img{
	width: 100%;
}
.doctor_txt{
	width: 100%;
}
.clinic{
	width: 100%;
	margin:  0 auto;
	border: 1px solid #52927c;
	box-sizing: border-box;
	padding-bottom: 25px;
	letter-spacing: 2px;
}
.clinic h6{
	background: #f1f6f6;
	color: #52927c;
	font-weight: 600;
	text-align: center;
	margin-bottom: 23px;
	padding: 8px 0;
	font-size: 20px;
}
.clinic_in {
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}
.clinic_pic {
	width: 100%;
	margin-bottom: 10px;
}
	.clinic_pic img{
		width: 100%
	}
.clinic_txt {
	width: 320px;
}

}
.qa{
	background: #f0fcf7;
	padding: 40px 0 50px;
	margin: 0 0 40px;
	min-width: 950px;
}

@media screen and (max-width : 600px ){
.qa{
	background: #f0fcf7;
	padding: 30px 0 40px;
	margin: 0 0 30px;
	min-width: 100%;
}
}

.voice{
	background: #adc6d8;
	padding: 40px 0 50px;
	min-width: 950px;
}

.voice h2{
	text-align: center;
	font-size: 19px;
	color: #f1f6f6;
	font-family: 'Hind', sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	line-height: 1;
	margin: 0 0 30px;
}
.voice h2 span {
	text-align: center;
	font-size: 31px;
	font-weight: 600;
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
	line-height: 1.7;
	padding-bottom: 0;
	padding: 0 3px 2px;
	border-bottom: 5px solid #f1f6f6;
}
@media screen and (max-width : 600px ){
	.voice{
		min-width: 100%;
	padding: 30px 0 30px;
}
	.voice h2{
	text-align: center;
	font-size: 16px;
	color: #f1f6f6;
	font-family: 'Hind', sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	line-height: 1;
	margin: 0 0 30px;
}
.voice h2 span {
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
	line-height: 1.7;
	padding-bottom: 0;
	padding: 0 3px 2px;
	border-bottom: 5px solid #f1f6f6;
}
}
.v_box {
	width: 280px;
	padding: 15px 20px;
	box-sizing: border-box;
	display: block;
	white-space:normal;
	background: #fff;
	height: 440px;
	border-radius: 5px;
}
.v_box h4{
	font-size: 20px;
	color: #000;
	font-weight: 600;
	text-align: center;	
	line-height: 1.4;
	margin-bottom: 6px;
}
.v_box h5{
	margin: 8px 0 6px;
	font-size: 16px;
	color: #333;
	font-weight: 500;
	text-align: center;	
	line-height: 1.4;
}
.v_box p{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	text-align:left;
}
 .voice .v_box p img{
	width: 50%;
	margin: 0 auto;
}
  

* {
      box-sizing: border-box;
    }

    .voice .slider {
        width: 900px;
        margin: 50px auto;
    }

    .voice .slick-slide {
      margin: 0px 10px;
    }

    .voice .slick-slide img {
      width: 100%;
    }

    .voice .slick-prev:before,
    .voice .slick-next:before {
      color: black;
    }


    .voice .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .voice .slick-active {
      opacity: .5;
    }

    .voice .slick-current {
      opacity: 1;
    }

@media screen and (max-width : 600px ){
.voice .slider {
        width: 80%;
        margin: 35px auto;
    }
.voice .slick-slide {
      margin: 0px 1px;
    }

}

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 92%;
    margin:0 auto;
	display: block;
}

.accordion-area li{
    margin: 0;
	background: url("../images/q.png") no-repeat;
	background-position: 0 20px;
	background-size: 28px 28px;
}

.accordion-area section {
	border-bottom: solid 1px #eee;
}

/*アコーディオンタイトル*/
.qa_in{
	width: 750px;
	margin: 0 auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 5px 0px rgba(141, 138, 138, 0.35);
	padding: 5px 0 15px;
}
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: 500;
    padding: 3% 60px 3% 36px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.title::before{
    top:48%;
    right: 3px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 3px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
	margin:0 3% 3% 3%;
    padding: 3%;
	font-size: 1rem;
	font-weight: 400;
}

@media screen and (max-width : 600px ){
	.qa_in{
	width: 90%;
	margin: 0 auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 5px 0px rgba(141, 138, 138, 0.35);
	padding: 5px 0 15px;
}
	.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: 500;
    padding: 3% 40px 3% 27px;
    transition: all .5s ease;
}
	.accordion-area li{
    margin: 5px 0 5px;
	background: url("../images/q.png") no-repeat;
	background-position: 0 13px;
	background-size: 21px 21px;
}
}

.form{
	background: #fcf7ed;
	padding: 40px 0;
}

.form h3{
	text-align: center;
	font-weight: 600;
	font-size: 36px;
	color: #fff;
	background: #52927c;
	padding: 15px 0;
}
footer {
	padding:20px 0 0; 
	text-align: center;
	border-top: 1px solid #ddd;
	margin-top: 50px;
	min-width: 950px;
}
footer a:link{ text-decoration:none; color:#006699;}
footer a:visited{ text-decoration:none; color:#006699;}
footer a:hover{ text-decoration:none; color:#3399cc;}
.link_area {
	width: 750px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.link{
	text-align: left;
	font-size: 16px;
}
.top {
	text-align: right;
	font-size: 24px;
}
.copy {
	background: #ddd;
	font-size: 12px;
	text-align: center;
	line-height: 1;
	padding: 15px;
	margin: 20px 0 0;
	color: #666;
}

@media screen and (max-width : 600px ){
.form{
	background: #fcf7ed;
	padding: 30px 0;
}

.form h3{
	text-align: center;
	font-weight: 600;
	font-size: 7vw;
	color: #fff;
	padding: 8px 0;
}
footer {
	padding:15px 0 0; 
	text-align: center;
	border-top: 1px solid #ddd;
	margin-top: 20px;
	min-width: 100%;
}
footer a:link{ text-decoration:none; color:#006699;}
footer a:visited{ text-decoration:none; color:#006699;}
footer a:hover{ text-decoration:none; color:#3399cc;}
.copy {
	background: #ddd;
	font-size: 2.9vw;
	text-align: center;
	line-height: 1;
	margin: 15px 0 0;
}
	.link_area {
	width: 94%;
	margin: 0 auto;
}
.link{
	text-align: left;
	font-size: 3.7vw;
}
.top {
	text-align: right;
	font-size: 22px;
}

}

.tool{
	padding: 40px 0 0;
	background: #fcf7ed;
	min-width: 950px;
}
.tool_box {
	max-width: 600px;
	margin: 0 auto;
}
.tool_box img{
	width: 100%;
}

.tool_box h3{
	width: 85%;
	margin: 0 auto;
}
.tool2 {
	margin: 40px auto 0;
background: #f9eed4;
	padding: 40px 0 50px;
}
.tool_box2 img{
	width: 100%;
}

.tool_box2 h3{
	width: 85%;
	margin: 0 auto;
}
.ttl_ap {
	background: #52927c;
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: 4px 0;
	margin: 30px auto 10px;
	border-radius: 5px;
	width: 380px;
	font-size: 20px;
}
.ap {
	background:#fff;
	padding: 5% 8%;
	border-radius: 10px;
	border: 1px solid #ccc
}
.ap p {
	width: 100%;
	margin: 0 auto 10px;
}
.ap_in{
	width: 100%;
}
* {
      box-sizing: border-box;
    }

    .tool .slider {
        width: 400px;
        margin: 20px auto 30px;
    }

    .tool .slick-slide {
      margin: 0px 10px;
    }

    .tool .slick-slide img {
      width: 100%;
    }

    .tool .slick-prev:before,
    .tool .slick-next:before {
      color: black;
    }


    .voice .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .voice .slick-active {
      opacity: .5;
    }

    .voice .slick-current {
      opacity: 1;
    }

@media screen and (max-width : 600px ){
.tool .slider {
        width: 80%;
        margin: 0 auto 10px;
    }
.tool .slick-slide {
      margin: 0px 1px;
    }
.tool{
	padding: 20px 0 0;
	background: #f0fcf7;
	min-width: 100%;
}
.tool_box {
	max-width: 90%;
	margin: 0 auto;
}
.tool_box img{
	width: 100%;
}

.tool_box h3{
	width: 85%;
	margin: 0 auto;
}
.tool2 {
	margin: 40px auto 0;
background: #fcf7ed;
	padding: 20px 0 30px;
}
.tool_box2 img{
	width: 100%;
}

.tool_box2 h3{
	width: 85%;
	margin: 0 auto;
}
.ttl_ap {
	background: #52927c;
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: 4px 0;
	margin: 30px auto 15px;
	border-radius: 5px;
	width: 90%;
	font-size: 20px;
}
}


/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time075{  
  animation-delay: 0.75s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}
.change-time075{  
  animation-duration: 0.75s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}

.fadein-left{
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  opacity: 0;
}
.fadein-left.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #51849a;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.pagetop__arrow {
  display: block;
  height: 10px;
  width: 10px;
  border-top: 3px solid #666;
  border-right: 3px solid #666;
  transform: translateY(20%) rotate(-45deg);
}

@media screen and (max-width : 600px ){
	.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 2%;
  bottom: 15px;
  background: #fff;
  border: solid 2px #52927c;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.pagetop__arrow {
  display: block;
  height: 10px;
  width: 10px;
  border-top: 3px solid #666;
  border-right: 3px solid #666;
  transform: translateY(20%) rotate(-45deg);
}
	
}