/* googlefonts  Noto Sans JP */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap');

html, body, 
*,
*:after,
*:before{
	letter-spacing:0;
	box-sizing:border-box;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
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, i,
dl, dt, dd, ol, ul, li,
input, textarea,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
 hgroup, menu, nav, section, summary,
time, mark, audio, video {
	font-size:100%;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
	background:transparent;
}

* {
  padding: 0;
  margin: 0;
    font-size: 62.5%;
	box-sizing:border-box;
}


article,side,details,figcaption,figure,
header,menu,nav,section {
	display:block;
}
table {
    width: 100%;
	border-collapse:collapse;
	border-spacing:0;
}
ul {
	list-style:none;
}
img {
	max-width:100%;
    vertical-align: top;
}
.clear:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}

/* **********************************************************
フォームリセット */
input,
button,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}



input[type="checkbox"],
input[type="radio"] {
	display: none;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
label,
button,
select {
  cursor: pointer;
}
/*
select::-ms-expand {
  display: none;
}
*/

/* **********************************************************
ラジオボタンの装飾  */

input[type="radio"] + label {
	display: block;
	position: relative;
	padding-left: 2em;
	margin-right: 1em;
}

input[type="radio"] + label::before {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 17px;
	height: 17px;
	border: 1px solid #707070;
	border-radius: 50%;
	background: #fefefe;
}

input[type="radio"]:checked + label::after {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 3px;
	width: 11px;
	height: 11px;
	background: #022859;
	border-radius: 50%;
}


/* **********************************************************
チェックボックスの装飾  */
input[class="contact"] + label {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    padding: 5px 0 0 30px;
    position: relative;
    width: 100%;
}

input[class="contact"] + label:before {
    background: #fefefe;
    border: 1px solid #707070;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
}
input[class="contact"] + label:after {
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    content: "";
    display: block;
    width: 6px;
    height: 11px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[class="contact"]:checked + label:before {
	border-color: #000;
    background-color: #000;
}
input[class="contact"]:checked + label:after {
    opacity: 1;
}

/* **********************************************************
チェックボックスの装飾  
input[name="contact"] + span {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 25px 0 30px;
    position: relative;
    width: auto;
}
input[name="contact"] + span:before {
    background: #fefefe;
    border: 1px solid #ddd;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
}
input[name="contact"] + span:after {
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    content: "";
    display: block;
    width: 6px;
    height: 11px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}
input[name="contact"]:checked + span:before {
	border-color:#000;
    background-color:#000;
}
input[name="contact"]:checked + span:after {
    opacity: 1;
}


/* **********************************************************
セレクトボックスの装飾  */

.selectbox {
	position:relative;
	display:inline-block;
}
/*
.selectbox::after {
	content:"";
	display:block;
	width:9px;
	height:9px;
	position:absolute;
	right:10px;
	top:35%;
	border-bottom:#da5c66 2px solid;
	border-right:#da5c66 2px solid;
	transform:rotate(45deg)translateY(-30%);
}
*/
.selectbox select{
	padding-right:30px;
}

/* フォーム リセット
********************************************************** */

/*
共通 end 
material start ******************************************* */

/*common CSS*/
._mb30{margin-bottom: 30px;}
._txtc{text-align: center;}
._yellow-btn a{
    display: inline-block;
    font-size: clamp(18px, 1.25vw, 20px);
    background-color: yellow;
  text-align: center;
  border-radius: 10px;
  border: 3px solid #23D152;
  color: #23D152;
  padding: 25px 2rem;
}
@media screen and (max-width: 767px){
    ._yellow-btn a{padding: 0.5em 1rem;border: 2px solid #23D152;}
}