@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')




/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
/* caption,th{text-align:left;} */
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
img,abbr,acronym,fieldset{border:0;}

body{

	/*font-family: "Zen Maru Gothic", serif;
	  font-weight: 400;
	  font-style: normal;
 	font-style: normal;*/
	/* font-family: "游ゴシック体", M PLUS Rounded 1c,Noto Sans JP, BIZ UDPGothic,  "メイリオ", "Meiryo"; */
	/* font-weight: 100; */
	
	font-family: "Noto Sans JP", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: <weight>;
	  font-style: normal;
	
	
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background: #fff;
}

html{
scroll-behavior: smooth;
scroll-padding-top: 150px;
}


a{
	color: #5eada5;
	text-decoration: none;
}

a:hover, .active{
  /* text-decoration: underline; */
  text-decoration: none;
}

a:active, a:focus,input:active, input:focus{outline:0;}


/* ヘッダー
------------------------------------------------------------*/
#header{
	clear: both;
	padding: 10px 30px 10px 30px;
	text-align: center;
	background-color:#d7faec;
}

#header h1{
	padding-top: 10px;
	padding-left:50px;
}

/* #header_2{
	clear: both;
	padding: 10px 30px 10px 30px;
	text-align: center;
	background-color:#004594;
} */


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 20px;
	text-align: center;
	font-size: 12px;
	background-color:#d7faec;
}





/* 共通
------------------------------------------------------------*/

/*
a:link{ color: #5eada5;
		text-decoration: none;
}
a:visited{ color: #5eada5;
		text-decoration: none;
}
a:hover{ color: #ffffff;
		text-decoration: none;
}
a:active{ color: #ffffff;
		text-decoration: none;
}
*/

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

section{
	clear:both;
}


.inner{
	width: 94%;
	margin: 0 auto;
	padding-bottom: 50px;
}

.inner1{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 30px;
	color: #5eada5;
}



.inner2{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 60px;
	color:#4d4c4b;
	/* color:#000; */
}




.inner2 .mkbtn {
    background-color: #5eada5;
    border: 3px solid #5eada5;
    border-radius:10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
}


.inner2 .mkbtn:hover {
    background-color: #fff;
    color: #5eada5;
}


.inner2 .mkbtn2 {
    background-color: #ffbb00;
    border: 3px solid #ffbb00;
    border-radius:10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.25rem 4rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
}


.inner2 .mkbtn2:hover {
    background-color: #fff;
    color: #ffbb00;
}


.inner2 p{
	font-size: clamp(14px, 2vw, 20px);
}


.inner3{
	font-size: clamp(12px, 2vw, 17px);
	margin: 0 auto;
	padding-left: 30px;
}

.inner1 a:link{ color: #5eada5;
		text-decoration: none;
		}
		
.inner1 a:visited{ color: #5eada5;
		text-decoration: none;
		}
		


/* .inner3 a{
	color:#004594;
}  */


.request{
	width: 70%;
	margin: 0 auto;
	padding-bottom: 60px;
}


.title{
	text-align: center;
	padding:30px;
	

}



.title p{
	color:#4d4c4b;
	font-size: clamp(20px, 3vw, 35px);
	font-weight: bold;
	padding-bottom:10px;
	border-bottom:solid 3px #5eada5;
}




.title2{
	padding:10px 30px 10px 30px;
	border-left:solid 10px #5eada5;
	margin-bottom:30px;
}

.title2 p{
	font-size: clamp(18px, 2vw, 25px);
	font-weight: bold;
}



.box{
	padding:30px;
	border:1px solid #cdcdcd;
	font-size: clamp(10px, 2vw, 16px);
}

/* 横並びにする */
.box-container {
    display: flex;
    flex-wrap: wrap;
    margin: -15px; /* 要素と要素の間に30pxの隙間を作成 */
}

/* 狭いときは縦並びにする */
@media (max-width: 800px) {
    .box-container {
        display: block;
        margin: 0;
    }

    .box-line {
        flex: 1 0 100%;
        margin: 15px 0;
        padding:15px;
    }
}


.box-line{
    flex: 1 0 calc(33.33% - 30px); /* 3つの要素を等分する */
    box-sizing: border-box;
    padding: 10px;
    margin: 15px; /* 要素の周囲に隙間を作成 */
	border:1px solid #cdcdcd;
	font-size: clamp(10px, 2vw, 16px);
	background-color: #fffff4;
}



.buttom{
	text-align:center;
	padding:15px;
	background-color:#6c9bd2;
	border-radius:30px;
	color:#FFF;
	font-weight: bold;
	transition: all  0.5s ease;
}


.buttom a:link{
	color: #ffffff;
	text-decoration: none;
}
.buttom a:visited{
	color: #ffffff;
	text-decoration: none;
}
.buttom a:hover{
	color: #ffffff;
	text-decoration: none;
}
.buttom a:active{
	color: #ffffff;
	text-decoration: none;
}

.buttom:hover{
	text-align:center;
	padding:15px;
	background-color:#3e86b7;
	border-radius:30px;
	color:#FFF;
	font-weight: bold;
}




.table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.row {
     display: table-row;
}

.cell {
     display: table-cell;
     border: 1px solid #cdcdcd;
     padding: 5px;
     font-size: clamp(10px, 2vw, 16px);
}

.left-column {
     width: 40%;
     /* background-color: #fffff4; */
     background-color: #d7faec;
     font-weight: bold;
     padding:10px;
}

.left-column img{
	margin:5px;
}

.left-column img:hover{
	margin:5px;
	 opacity: 0.5;
	 transition: all  0.5s ease;
}

.left-column-th {
     width: 40%;
     background-color: #fffff4;
     text-align:center;
     font-weight: bold;
     
}

.right-column {
     width: 60%;
     background-color: #FFFFFF;
     padding:10px;
}

.right-column-th {
     width: 60%;
     background-color: #FFFFFF;
     text-align:center;
     font-weight: bold;
}

@media (max-width: 800px) {
      .table {
        display: block;
}

.row {
       display: flex;
       flex-wrap: wrap;
}

.cell {
       width: 100%;
}






/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 1200px){
	.inner{
		width: 960px;
	}
}

@media only screen and (min-width: 800px){
	body{
		font-size:16px;
	}