@charset "UTF-8";
/* CSS Document */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a,a:hover,a:visited{
    color: inherit;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*リセットCSSここまで*/

body {
	margin: 0 auto;
	padding: 0;
	font-size: 12pt;
	line-height: 1.7em;
	color: #3C3D3D;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	background-color: #ffff;
}

img {max-width: 100%;}

header{
	text-align: center;
	padding: 10px;
}

.key{
	background: linear-gradient(-0deg, #CEDFDF 0%, #fff 100%);
}

.key img {
	margin: 0 auto;
	max-width: 100%;
    text-align: center;}

		
.paple_gradation {
	background: linear-gradient(-0deg, #fff 0%, #A38BAF 100%);
}

.section1 {
	margin: 0 auto;
	text-align: center;
	max-width: 840px;
	padding-bottom: 50px;
}
.section1 img{
	max-width: 100%;
}

.section1 h1{
	color: #fff;
	font-size: 20pt;
	font-weight: bold;
	padding: 50px 0;
}

.section1 h2{
	color: #BB435E;
	font-size: 16pt;
	font-weight: bold;
	padding-bottom: 50px ;
}

.catch{border-bottom: solid 2px  #BB435E ; padding: 4px; line-height:2em;}
.section1 p{
	margin: 0 auto;
	text-align: center;
	max-width: 700px;
	text-align: left;
}
.red{color: #BB435E;}

.paple{background-color: #E6DFEA;padding: 50px 0;}
.section2{margin: 0 auto; max-width: 700px; padding-top: 0px;　padding-bottom: 50px;}
.section2 h1{
	margin:0 auto; color: #785F87; text-align: center; font-size: 20pt;line-height:1.7em;
	max-width: 660px;
	position: relative;
    border-bottom: 3px solid;
	padding-bottom: 30px;
}
.section2 h1:before,
.section2 h1:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

.section2 h1:before {
    border: 16px solid;
    border-color: transparent;
    border-top-color: #785F87;
    margin-left: -16px;
}

.section2 h1:after {
    border: 12px solid;
    border-color: transparent;
    border-top-color: #E6DFEA;
    margin-left: -12px;
}
.paplebold{color: #785F87; font-size: 16pt; font-weight: 600; line-height: 1.7em; padding-bottom: 50px;}
.section2 img{padding: 50px 0;max-width: 100%;}
.button {margin: 0 auto; text-align: center; padding-bottom: 0px; max-width: 500px;}
.announcement {margin: 0 auto; text-align: center; padding-bottom: 0px; max-width: 100%;}


.yellow{background-color: #F4EEDF; padding-bottom: 50px; }
.section3_1 { 
	margin: 0 auto;
	max-width: 700px; padding: 50px;}
.section3_1 h1{text-align: center; color: #846934; font-size: 20pt;padding-bottom: 50px;} 

.section3_2{background-color: #fff;
	margin: 0 auto;
	text-align: center;
	max-width: 1000px;
	padding-bottom: 50px;
}
.section3_2 img{
	max-width: 100%;
	padding-top: 50px;
	padding-bottom: 20px;
}

.contents1{background: #fff;}
.contents2{background: #fff;}

.contents1,.contents2{
width: 50%;}
.contents1{padding:65px 0; border-right: 10px; border-right: solid; border-color: #846934; }
.contents1 h1{color: #846934; font-size: 20pt;}
.contents1 p{max-width: 240px; text-align: left; margin: 0 auto;}
.contents2{height: auto; padding: 10px; }
.contents2 p {text-align: left; color: #846934; }

.main{
display: flex;
margin: 0 auto;
max-width: 820px;
padding: 10px;
border: 10px; border: solid; border-color: #846934; 
}


.white{
	padding: 50px 0;
	margin: 0 auto;
	text-align: center;
}


.contents3{background: #fff; width: 40%; padding:110px 0; }
.contents4{background: #fff; width: 60%;}
.contents4 h1{ font-size: 27px;  text-align: center; padding-top: 50px; color: #846934} 
.contents4 p{padding: 50px 84px;} 
.contents5{background: #fff; width: 75%;}
.contents5 h1{ font-size: 27px;  text-align: center; padding-top: 50px; color: #846934} 
.contents5 p {padding: 50px;}
.contents6{background: #fff;width: 35%; padding: 50px 0;}

.pdding{padding: 50px 0;}
.main2,.main21{
	display: flex;
	margin: 0 auto;
	max-width: 1000px;
	}

.yellow_gradation {background: linear-gradient(-0deg, #fff 0%, #F4EFE0 100%);
}
.yellow_gradation h1{color: #846934; font-size: 27px; text-align: center; padding: 50px 0;}
	

.box{margin: 0 auto; background-color: #E8DCC8; max-width: 640px; padding: 20px; }
.triangle {
	margin: 0 auto; 
	margin-top:  10px;
	margin-bottom: 10px;
	background: #E8DCC8 ;
	height: calc(tan(60deg) * 18px / 2);
	width: 18px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .green_gradation {background: linear-gradient(-0deg, #fff 0%, #E4EFEF 100%);}
  .green_gradation h1{color: #606060; font-size: 27px; text-align: center; padding: 50px 0;} 

  .Qa-Box {
	max-width: 700px;
	margin: 0 auto;
	counter-reset: question-counter; /* カウンターの初期化 */
  }
  
  .Qa-Box .Qa dt,
  .Qa-Box .Qa dd {
	display: flex;
	align-items: baseline;
	margin: 10px 0;
	padding: 10px;
  }
  
  .Qa-Box .Qa dt {
	background: #E4EFEF;
  }
  
  .Qa-Box .Qa dt p {
	margin: 0;
	padding-left: 15px;
	font-weight: bold;
	width: 100%;
  }
  
  .Qa-Box .Qa dd p {
	margin: 0;
	padding-left: 15px;
	width: 100%;
  }
  
  .Qa-Box .Qa dt::before {
	counter-increment: question-counter; /* カウンターをインクリメント */
	content: "Q" counter(question-counter) ". ";
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #56A080;
	width: 3em;
	height: 2em;
	text-align: center;
	border-radius: 0%; /* 丸くする */
  }
  
  .Qa-Box .Qa dd::before {
	content: "A" counter(question-counter) ". "; /* 同じカウンターを利用 */
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #DF92A2;
	width: 3em;
	height: 2em;
	text-align: center;
	border-radius: 0%; /* 丸くする */
  }

  .blue{background-color: #E6F0FC; padding: 50px 0;}
  .image{margin: 0 auto; text-align: center;}
  .blue h1{color: #fff; font-size: 27px; }
  .seikatsu{margin: 0 auto;  text-align: center; background-color: #367CCE; width: 360px; padding: 10px 0;}
  .blueBold{ margin: 0 auto; text-align: center;  font-size: 22px; color: #367CCE; font-weight: bold; max-width: 840px; padding: 30px 0 30px 0;}

  .main3{
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 840px;
	}
	.contents7{ max-width: 240px; padding:10px;} 
	.contents7 p{ margin:0 auto;  }

.Bigblue{background-color: #367CCE;}
.Bigblue h1{color: #fff; text-align: center; font-size: 27px; padding: 30px 0;}
.bluetriangle {
	margin: 0 auto; 
	margin-bottom: 10px;
	background: #367CCE ;
	height: calc(tan(60deg) * 26px / 2);
	width: 50px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .blue2 {background-color: #E6F0FC; padding-bottom: 50px;}
  .helpdeskbold{padding: 50px 0; font-size: 27px; color: #367CCE; text-align: center; font-weight: bold; line-height: 1.7em;}
  .tel {
	margin: 0 auto;
	max-width: 700px;
    background: linear-gradient(135deg, #E2877E 0%,  #F1C673 100%);
    border-radius: 5px;
    padding: 2px;

}
.tel-content {
	max-width: 700px;
    background: #ffffff;
    border-radius:4px;
    padding: 16px;
	font-size: 27px; color: #367CCE; text-align: center; font-weight: bold; line-height: 1.7em;}

	.call {font-size: 45px; color: #367CCE; text-align: center; font-weight: bold; padding: 20px 0;} 

footer{
margin: 0 auto;
text-align: center;
	}
	footer img{
		width: 1000px;
	}
.info{
		text-align: center;
		background-color: #785F87;
		color: #fff;
		padding: 20px 0;
	}

  @media screen and (max-width: 500px){
	.sp { display: block !important; }
	.pc { display: none !important; }
}

@media screen and (min-width: 500px){
	.pc { display: block !important; }
	.sp { display: none !important; }
}


@media screen and (max-width: 500px){
	body {font-size: 10pt;}
	header{
		padding-top: 30px;
	}
	.section1 {
		padding-bottom: 30px;
	}

.section1 h1{
	font-size: 14pt;
	padding: 30px 0;
}
.section1 h2{
	font-size: 12pt;
	font-weight: bold;
	padding-bottom: 30px; 
	max-width: 90%;
	margin: 0 auto;
}
.section1 p{
	margin: 0 auto;
	text-align: center;
	max-width: 90%;
	text-align: left;
}

.paple{background-color: #E6DFEA;
	padding: 20px 0;}
.section2{margin: 0 auto; max-width: 90%; padding-top: 0px;padding-bottom: 30px;}
.section2 h1{
	 font-size: 14pt;
	max-width: 100%;
	position: relative;
    border-bottom: 3px solid;
	padding: 0rem 0;
}
.paplebold{font-size: 12pt; font-weight: 100%; line-height: 1.7em; padding-bottom: 0px;}
.section2 img{padding: 30px 0;}
.button {padding-bottom: 0px; width: 80%;}
.announcement {padding-bottom: 0px; width: 96%;}
.yellow{padding-bottom: 30px; }
.section3_1 { padding: 30px;}
.section3_1 h1{font-size: 16pt;padding-bottom: 30px;} 

.section3_2{
	margin: 0 auto;
	text-align: center;
	max-width: 96%;
	padding-bottom: 30px;
}
.section3_2 img{
	max-width: 90%;
	padding-top: 30px;
	padding-bottom: 20px;
}

.contents1,.contents2{
width: 100%;}
.contents1{padding:15px 0; border-right: 0px; border-bottom: solid; border-color: #846934; }
.contents1 h1{color: #846934; font-size: 16pt;}
.contents1 p{max-width: 240px; text-align: left; margin: 0 auto;}
.contents2{height: auto; padding: 10px; max-width: 240px;}
.contents2 p {text-align: left; color: #846934; }
.main{
	display:block;
	margin: 0 auto;
	max-width: 80%;
	padding: 10px;
	border: 5px; border: solid; border-color: #846934; 
	}

.white{padding: 30px 0;	}
	
	
	.contents3{background: #fff; width: 100%; padding:30px 0; flex-direction: column-reverse; }
	.contents4{background: #fff; width: 100%; flex-direction: column}
	.contents4 h1{ font-size: 20px;  text-align: center; padding-top: 30px; } 
	.contents4 p{padding: 30px;} 
	.contents5{background: #fff; width: 100%; }
	.contents5 h1{ font-size: 20px; padding-top: 30px; } 
	.contents5 p {padding: 30px;}
	.contents6{width: 100%; padding: 30px 0;}
	
	.pdding{padding: 30px 0;}
	.main2{
		display: block;
		margin: 0 auto;
		max-width: 96%;
		}

		.main21{
			display: flex; /* Flexboxを適用 */
			flex-direction: column-reverse; /* 下から上の順に並べる */
			margin: 0 auto;
			max-width: 96%;
			}
	
	.yellow_gradation h1{font-size: 20px; text-align: center; padding: 30px 0;}
		
	
	.box{margin: 0 auto; background-color: #E8DCC8; max-width: 90%; padding: 10px; }
	.triangle {
		height: calc(tan(60deg) * 18px / 2);
		width: 18px;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	  }
	
  .green_gradation h1{font-size: 20px; padding: 30px 0;} 

  .blue{padding: 30px 0;}
  .blue h1{font-size: 20px; }
  .seikatsu{max-width: 300px;  padding: 10px 0;}
  .image{margin: 0 auto; text-align: center; width: 90%;}
  .blueBold{ font-size: 14px; max-width: 90%; padding: 30px 0 30px 0;}

  .main3{
	display: block;
	justify-content:baseline;
	margin: 0 auto;
	text-align: center;
	max-width: 70%;
	}
	.contents7{ max-width: 100%; padding:10px; } 
	.contents7 p{text-align: left;}

.Bigblue h1{font-size: 20px; padding: 20px 0;}
.bluetriangle {
	margin: 0 auto; 
	margin-bottom: 0px;
	background: #367CCE ;
	height: calc(tan(60deg) * 26px / 2);
	width: 50px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .blue2 {padding-bottom: 30px;}
  .helpdeskbold{padding: 30px 0; font-size: 16px; line-height: 1.7em;}
  .tel {
	max-width: 90%;
  
    padding: 2px;

}
.tel-content {
	max-width: 90%px;
    background: #ffffff;
    padding: 16px;
	font-size: 18px; line-height: 1.7em;}

	.call {font-size:36px; padding: 20px 0;} 

footer{
margin: 0 auto;
text-align: center;
	}
	footer img{
		width: 100%;
	}
.info{
		padding: 10px 10px;
		font-size: 8pt;line-height: 1.7em;
		text-align: left;
		
	}
}
  
  @media screen and (max-width: 960px) {
	.Qa-Box {
	  width: 95%;
	}
  }