@charset "UTF-8";
/* CSS Document */

/* 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%;margin-bottom:0; padding-left:0;}
img,abbr,acronym,fieldset{border:0;}

a {text-decoration:none;}
a:focus,*:focus {outline:none;}
html {width: 100%; font-size: 62.5%;}
* {box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body {width:100%;}



/* base */
:root {
	--white:     #ffffff;
	--dwblue:    #009CDE;
	--blue:      #A3DCF3;
	--lightgray: #cccccc;
	--darkgray:  #535353;
}
#contact .sp { display: block;}
#contact .pc { display: none;}

#contact {
	width: 100%;
	font-family: 'Noto Sans', sans-serif !important;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.15rem;
	color: var(--darkgray);
	font-feature-settings: "palt";
	padding: 0;
	text-align: left;
}
#contact img {width:100%;display:block;}
#contact a {
	color: var(--darkgray);
}
#contact a:hover {
	text-decoration:none;
}
#contact a.txt-link {
	color: var(--darkgray);
	font-weight: bold;
	text-decoration: underline;
}
#contact h3{
	font-size: 14px;
	margin-bottom: 1rem;
	font-weight: bold;
	text-align: center;
}
#contact .main-tit {
	width: 90%; margin: 0 auto;
	font-size: 14px;
	margin-bottom: 2.5%;
	text-align: center;
	border-bottom: none !important;
}
#contact .caution {
	font-size: 12px;
	margin-left: 1rem;
	text-indent: -1rem;
}
#contact [class*="btn"] {
    display: block;
    text-align: center;
    font-weight: bold;
    color: var(--white);
    padding: 13px;
    margin: 0 auto;
    background:var(--darkgray) ;
    width: 85%; max-width: 280px;
    font-size: 14px;
	border-radius: 40px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#contact .btn-line{
	background: var(--white);
	color: var(--darkgray);
	border: 1px solid var(--darkgray);
}

				@media screen and (min-width: 1200px){
					#contact .sp { display: none;}
					#contact .pc { display: block;}
					#contact {font-size: 16px;}
					#contact a:hover {opacity: 0.7; transition: all 0.3s ease 0s;}
					#contact h3{font-size: 18px; margin-bottom: 1.5rem;}
					#contact .main-tit {
						width: 100%; margin: 0 auto 20px;
						font-size: 20px; text-align: left;
					}
					#contact .inner{max-width: 1200px; margin: 0 auto;}
				}



/* main */
#contact .contents{
	width: 90%; margin: 0 auto;
	overflow: hidden; clear: both;
}
#contact .contents-main{
	width: 100%; margin: 0 auto;
	padding: 5% 0;
}
#contact .contents-tit{
	font-size: 22px;
	margin-bottom: 1.5rem;
	text-align: center;
}
#contact .contents-txt{
}
#contact .contact-list{
	width: 100%; margin: 0 auto 30px;
	display: flex; flex-wrap: wrap; justify-content: center;
	align-content: center;
}
#contact .contact-list li{width: calc(100%/2); padding: 2%;}
#contact .contents-note{
	width: 100%; margin: 0 auto;
	border: 1px solid var(--lightgray);
	border-radius: 4px;
	padding: 2.5% 5%;
}
#contact .contents-note .note-tit{
	padding-bottom: 2.5%;
	border-bottom: 1px solid var(--lightgray);
}
#contact .contents-note .note-list{
	margin-bottom: 1.5rem;
}
#contact .contents-note .note-list li{list-style-type: circle;margin-left: 24px; margin-bottom: 1rem;}
				@media screen and (min-width: 1200px){
					#contact .contents{width: 100%;}
					#contact .contents-tit {font-size: 28px;}
					#contact .contents-main .contents-txt{	text-align: center;}
					#contact .contact-list li{width: calc(60%/2); padding: 2%;}
				}