@charset "utf-8";

.wrap{max-width: 90%;margin: 0 auto;}
.f_min{font-family: 'Linux Libertine','Georgia','Times',serif;}
.f_cent{text-align: center;}
.f_mini{font-size: 14px;}
p span{ font-weight: bold;}
a{ color: #3366cc;}

header{
	background: #eaecf0;
	padding: 15px 0;
	font-size: 11px;
	color:#666;
	box-shadow: inset 0 -1px 3px rgb(0 0 0 / 8%);
	margin: 0 0 20px;
}

main{
	padding: 0 0 40px 0;
}

main h2{
	font-size: 27px;
	color:#222;
}

main p{
	font-size: 16px;
	color:#555;
	padding: 8px 0 16px;
	line-height: 1.8em;
}


/** 外部リンク判定 ********/
main a[href^="http"]:after,
main a[href^="//"]:after {
  margin: 0 0 0 3px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
  vertical-align: baseline;
  font-size: 60%;
}
}
main a[href^="https://willplant.tv"]:after {
  margin: inherit;
  font-family: inherit;
  content: '';
  font-weight: inherit;
}


/** テーブル ********/
table{
	background:#f8f9fa;	
	border: 1px solid #eaecf0;
	text-align: left;
	font-size: 14px;
}

table , td, th {
	width: 100%;
	border-collapse: collapse;
}
td, th {
	padding: 7px 10px;
	width: 30px;
	height: 25px;
	vertical-align: top;
	border-bottom: 1px solid #eaecf0;
}
.table_name{
	padding: 7px 10px;
	font-size: 18px;
	background: #f0e6cc;
}

td img{
	padding: 5px 20% 0;
	max-width: 100%;
    height: auto;
	vertical-align: middle;
}

.even {background: #fbf8f0;}
.odd {background: #fefcf9;}
.sm_th{width: 25%;}


/** アコーディオン ********/
.acd-check{
    display: none;
}
.acd-label{
    background: #fff;
    color: #666;
    display: block;
    margin-bottom: 1px;
	padding: 10px 0 0 50px;
    position: relative;
	font-size: 24px;
	border-bottom: 1px solid #eaecf0;
    margin-bottom: 0.5em;
}
.acd-label::before{
    box-sizing: border-box;
    content: '\f106';
	color: #aaa;
    display: block;
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    height: 52px;
    padding: 10px 0;
    position: absolute;
    left: 0;
    top: 0px;
}

.acd-content p {
    letter-spacing: 0.03em;
}

.acd-content{
	display: none;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
	width: 100%;
}

.acd-check:checked + .acd-label::before{
    content: '\f107';
}
.acd-check:checked + .acd-label + .acd-content{
	display: block;
    opacity: 1;
    visibility: visible;
	padding: 0 0 60px 0;
}

.acd-content h3{font-size: 16px; color: #222; margin: 20px 0 6px;}
.acd-content h4{font-size: 16px; color: #888; margin: 20px 0 0;}
.acd-content h5{font-size: 14px; color: #222; margin: 20px 0 3px;}

.acd-content .content{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.acd-content .content li{
	width: 49%;
	margin: 0 0 10px;
}

.acd-content .content li a img{
	object-fit: cover;
	width: 100%;
	height: 120px;
}

/** ポップアップ ********/

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #222;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
	width: 94%;
	text-align: center;
}

.modal__content img{
	max-height: 500px;
	width: auto;
	max-width: 100%;
}

.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
  }
  .youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
  }

/** フッター ********/


footer{
	border-top: solid 1px #c8ccd1;
    overflow: auto;
    padding: 20px 0;
	background: #eaecf0;
}

footer h2{
	font-size: 12px;
	margin: 0 0 8px 0;
}

footer ul{
	margin: 0 0 40px 0;
}

footer ul li a{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	color: #222;
	border: 1px solid #ddd;
}

footer ul li div{
	background: #fff;
	width:25%;
}

footer ul li div + div{
	width:75%;
	display: flex;
	justify-content: center;
	align-items: center;
}

footer ul li div + div div{
	width: 100%;
	padding: 0 10px;
	display: block;
}

footer ul li div + div div h3{color:#666;margin: 0 0 5px 0;font-size: 14px;}
footer ul li div + div div p{color:#888;}

footer h1{
	display: block;
	padding: 10px;
	font-size: 16px;
	color: #555;
	border-bottom: 1px solid #ccc;
}

@media screen and (min-width: 768px) {


.wrap{max-width: 500px;}


	
}