/*** inport ***/
@import "setting.css";
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600&display=swap");
/***********
** COMMON **
***********/
body{
	font-size:1.1rem;
	color:#333;
}
@media screen and (max-width: 480px){
	body{
		font-size:1.0rem;
	}
}
img{ max-width:100%; }
.red{ color:#F00; }
.blue{ color:#3399cc; }
.fo90p{ font-size:1.0rem; }
.gray{ color:#999; }
.bg-gray{ background:#666; }
.bold500{ font-weight:500; }
.bold600{ font-weight:600; }
.tc{ text-align:center; }
.tR{ text-align:right; }
.tL{ text-align:left; }
ul{
	list-style-type:none;
}
.mt10{ margin-top:10px; }
.mb10{ margin-bottom:10px; }
.mr10{ margin-right:10px; }
.ml10{ margin-left:10px; }
.pt10{ padding-top:10px; }
.pb10{ padding-bottom:10px; }
.wrap{
	padding:20px;
}
@media screen and (max-width: 896px){
	.wrap{
		padding:10px;
	}
}



/*============
** MAIN **  
============*/
.main{
	max-width:97%;
	margin:122px auto 0;
	padding:30px;
	background:#fff;
}
.main h2{
	font-size:3.0rem;
	text-align:center;
}
.main .read{
	text-align:center;
}
@media screen and (max-width: 896px){
	.main{
		padding:10px;
	}
	.main h2{
		font-size:2.3rem;
	}
}
@media screen and (max-width: 480px){
	.main .read{
		text-align:left;
	}
}

/* form */
.dl-style dl{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:15px;
	border-bottom:1px dotted #ccc;
}
.dl-style dt{
	width:30%;
	padding:10px;
}
.dl-style dd{
	flex:1;
	padding:10px;
}
.dl-style dl.no-flex{
	display:block;
}
.dl-style dl.no-flex dt{
	width:100%;
}
.policy_contact {
	width:90%;
  height: 250px;
  margin:0 auto;
  padding: 10px;
  border: 2px solid #111;
  overflow-y: scroll;
}
.policy_contact{
	font-size:1.0rem;
	color:#333;
}
.policy_contact dl dt{
	font-size:1.2rem;
	font-weight:600;
}
.policy_contact dl dd{
	font-size:1.1rem;
}
.policy_contact dl dd ul{
	margin:10px 10px 10px 20px;
	font-weight:400;
}
@media screen and (max-width: 480px){
	.policy_contact dl dd ul{
		margin:10px 10px 10px 15px;
	}
	.policy_contact dl dt{
		font-size:1.1rem;
	}
}

.button{
	display:flex;
	justify-content:center;
	margin:25px 10px;
}
.button li{
	padding:0px;
}

@media screen and (max-width: 480px){
	.dl-style dl{
		display:block;
		padding:0;
	}
	.dl-style dt,.dl-style dd{
		width:100%;
	}
}

/* form style */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"] {
    background: #f0ebe1;
    height: 50px;
    padding: 8px 16px;
    line-height: 1.8;
    max-width: 100%;
}
textarea {
    background: #f0ebe1;
    padding: 8px 16px;
    line-height: 1.8;
    width: 100%;
}
/* select */
select{
	word-break:break-all;
	max-width:100%;
}
.form__select-wrap {
    background: #f0ebe1;
    position: relative;
    display:inline-block;
    max-width:100%;
}
.form__select-wrap select {
    height: 50px;
    padding: 8px 48px 8px 16px;
    line-height: 1.8;
}
.form__select-wrap::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    margin-left: 16px;
    border: 7px solid transparent;
    border-top: 12px solid #333;
    border-bottom: none;
    pointer-events: none;
}
/* radio checkbox */
.visually-hidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%); 
  margin: -1px;
}
/* checkbox */
.checkbox label {
  cursor: pointer;
  padding-left: 30px;
  position: relative;
}

.checkbox label::before,
.checkbox label::after {
  content: "";
  display: block; 
  position: absolute;
}

.checkbox label::before {
  background-color: #fff;
  border-radius: 0%;
  border: 1px solid #666;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  top: 50%;
  left: 5px;
}


.checkbox label::after {
  border-bottom: 2px solid #666;
  border-left: 2px solid #666;
  opacity: 0;
  height: 10px;
  width: 15px;
  transform: rotate(-45deg);
  top: 5px;
  left: 9px;
}

.checkbox input:checked + label::after {
  opacity: 1;
}
/* radio button */
.radio label {
  cursor: pointer;
  padding-left: 30px;
  position: relative;
}

.radio label::before,
.radio label::after {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.radio label::before {
  background-color: #fff;
  border: 1px solid #3399cc;
  height: 20px;
  width: 20px;
  left: 5px;
}

.radio label::after {
  background-color: #3399cc;
  opacity: 0;
  height: 16px;
  width: 16px;
  left: 7px;
}

.radio input:checked + label::after {
  opacity: 1;
}

/* submit button */
.c-form-submit-button {
    display: inline-block;
    width: 100%;
    padding: 8px 30px;
    border: none;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    border: 2px solid transparent;
}
.c-form-submit-button.reset{
	background-color: #666;
}

.c-form-submit-button:hover {
    background-color: #000;
}

.c-form-submit-button:focus {
    outline: 0;
    background-color: #000;
    border: 2px solid rgb(33, 150, 243);
}

.go_back{
	
	text-align:center;
	margin:20px auto;
}
.go_back a{
	display: inline-block;
    padding: 8px 30px;
    border: none;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    border: 2px solid transparent;

	color:#fff;
	text-decoration:none;
	width:40%;
}
.go_back a:hover{
	background-color: #000;
}