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

body{
font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	background-color: #EEE;
	font-size: 16px;
	overflow-x: hidden;
}

/* Break Line
---------------------------- */
.pc { display: block !important; }
.sp { display: none !important; }

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

.attention{
	font-size: 14px;
	text-indent: -1em;
	padding-left: 1em;
	
}
.attention li{
	margin: 3px 0
}
@media screen and (max-width: 768px) {
.attention{
	font-size: 12px;
	line-height: 1.4em
}
}


a{
	color: #3970E0;
	font-weight: bold
}
.meishi{
	display: flex;
	align-items: center;
	column-gap: 10px;
	height: 45px;
	width: 100%
}
.koumoku{
	    width: 70px;
		font-size: 14px
}
@media screen and (max-width: 768px) {
.koumoku{
		font-size: 13px
}
}

.meishi_box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:15px
}

.red{
	color: #D30B0E;
	font-weight: bold
}

.mfp_rows .meishi input[type="text"],
.mfp_rows .meishi select{
	width: 271px;
}
@media screen and (max-width: 768px) {
.mfp_rows .meishi input[type="text"],
.mfp_rows .meishi select{
	width: 228px;
}
}


.meishi_box li{
	width: 48%
}
@media screen and (max-width: 767px) {
.meishi_box li{
	width: 100%
}
}


.box{

}
.one_column{
	width: 100% !important
}




.accordion {
margin: 3em auto;
max-width: 100%;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
border: solid 1px #ccc;
padding:.5em  1em;
display: block;
color: #333;
font-weight: bold;
font-size: 20px;
margin-top: 10px
}
@media screen and (max-width: 767) {
.title {
font-size: 16px;
}
}


.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: .8em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}

.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}

.toggle:checked + .title + .content {
max-height: 100%;
width: 100%;
transition: all 1.5s;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

section{
	width: 48%
}
@media screen and (max-width:767px) {
section{
	width: 100%
}
}


.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}

.tool{
	font-weight: 600;
    margin: 25px 0 10px 0;
    background: #676767;
    color: #fff;
    padding: 3px 12px;
    border-radius: 3px;
    line-height: 1.8em;
}

.toolimg img{
	height: 200px;
}

#text{
	text-indent: -1em;
	padding-left: 1em
}
@media screen and (max-width:767px) {
#text{
	font-size: 14px
}
}

ul,li{list-style: none; margin: 0;
 padding: 0}

.large{
	font-size: 20px;
    color: red;
}
@media screen and (max-width:767px) {
.large{
	font-size: 16px;
}
}

.mini{ font-size: 12px}


.setsumei{
	font-size: 16px;
	margin: 20px 0
}
@media screen and (max-width:767px) {
.setsumei{
	font-size: 14px;
	margin: 15px 0
}
}


.one_column img{
	width: 100%;
	height: auto
}