@charset "utf-8";
/* CSS Document */
p.text{font-size:1em;
padding:10px 5%;}
p.link {border:solid 1px #000000;
border-radius: 15px;
font-size: 1em;
color: #000;
text-align: center;
margin: 20px auto;
padding: 5px 10px;
width: 80%;}
p.link a{color:#000;
text-decoration: none;}
.list ul{width:100%;
margin: 20px auto;
display: flex;
list-style: none;
align-content:space-between;
padding: 0;
flex-wrap: wrap;
}
@media screen and (max-width:640px) {
.list ul {justify-content: space-between}
.list ul li{width:38%;
margin-bottom: 10px;
}
h3{ font-weight: bold;
padding: 10px 10px ;
margin-bottom: 10px;
margin-top: 0;}
h3.subtitle {
background:#FF5F00;
color:#fff;
font-size:1.25em;
border-radius:10px;
padding: 10px;
}
.list ul li{border: 1px solid #999;
padding:10px 20px 10px 10px ;
background:#fff;
}
}
.list ul li a{position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
.list ul li:hover {background:#474747;
color:#fff}
.list ul li {color:#000;
position: relative;
display: flex;
align-items: center;
/*(サイズや色はお好きに)*/
}
.list ul li::after{
content: "";
display: block;
width: 8px;
height: 8px;
position: absolute;
right: 15px;
top: calc(50% - 2px);
border-top: solid 2px;
border-right: solid 2px;
transform: rotate(45deg) translateY(-50%);
color: inherit;
}
@media screen and (min-width:641px) {
.list ul li{
margin-right: 1%;
width: 20%;
margin-bottom: 10px;}
h3{ font-weight: bold;
padding: 10px 10px 20px ;
margin-bottom: 10px;}
h3.subtitle {
background:#FF5F00;
color:#fff;
font-size:1.25em;
border-radius:10px;
padding: 10px;
}
.list ul li{border: 1px solid #999;
padding:10px 28px 10px 10px ;
background:#fff;}
}
.list ul li:last-child{margin-right: 0;}
h2.title{border-top:1px solid #000;
border-bottom:1px solid #000;
padding: 10px;}
h2.subtitle {
background:#FF5F00;
color:#fff;
font-size:1.25em;
border-radius:10px;
padding: 10px;
}
ul.list_size{width:100%;
margin: 0;
display: flex;
list-style: none;
align-content:space-between;padding: 0;
flex-wrap: wrap;}
ul.list_size li a{color:#000;
text-decoration:none;}
ul.list_size li a:hover{color:#5eddc4;}
h3.sub_title{border-left:8px solid #255515;
border-bottom: 1px solid #255515;
padding: 5px 0 5px 10px}
.subimg ul{width:100%;
margin: 0;
display: flex;
list-style: none;
align-content:space-between;padding: 0;}
.subimg ul li{width:50%;}
.subimg p{margin:10px;font-size:1.15em;}
.subimg p.pink{font-weight:bold;
color:#FF3F81;}
.subimg p.green{font-weight:bold;
color:#529fb5;}
.item_box{width:100%;
display: flex;
align-content:space-around;
flex-wrap: wrap;}
.item{margin-bottom: 20px;
flex-direction: column;
display: flex;}
.item:last-child{margin-right: 0;}
.item a{color:#000;
text-decoration: none;
}
.item .size{background: #000;
color:#fff;
text-align: center;
font-size:0.85em}
.item{
position: relative;
z-index: 1;
margin-bottom:35px;}
.item a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.item .catch{
font-weight: bold;
margin-top: auto;
}
.item .name{
margin: 10px 0;
display: flex;
flex-direction: column;
margin-bottom: auto;
align-items: flex-start;
min-height: 60px;
}
.item .btn{
background: #000;
color: #fff;
text-align: center;
margin-top: auto;
padding:10px;
}
.item2 {width:49%;
margin:10px 2% 10px 0; }
.item2:nth-child(2n){margin-right: 0;}
@media screen and (max-width: 640px) {
.pc{display:none!important}
.conBox{width:100%; }
.conBox_sp {display: flex; }
.item{width:49%;
margin-right: 1%}
ul.list_size li{width:18%;margin: 10px 5px;
border: 1px solid #000;
border-radius:10px;
padding: 10px 5px;
text-align: center;
}
.item .catch{
min-height: 72px;
}
}
@media screen and (min-width: 641px) {
.sp{display:none!important}
.conBox{width:100%;
display: flex;} .mainimg{width:48%; }
.subimg{width:50%}
.item{width:24%;margin-right: 1%}
ul.list_size li{width:18%;margin: 10px 5px;
border: 1px solid #000;
border-radius:10px;
padding: 10px 0;
text-align: center;
}
.item .catch{
min-height: 45px;
}
}
section{margin-top:20px;}
.red_title{font-size:1.25em;
font-weight: bold;
color:#AD0002;
border-bottom: 2px dotted #ad0002;
margin:10px 0;
padding: 10px 0;}
/*-----------------------------------
サイドメニュー
--------------------------------------*/
@media screen and (min-width: 641px) {
.side_menu{font-size: 14px;
position: fixed;
left: 1%;
top:5%;
z-index: 999;}
.side_menu .title{background: #0E4917;
color: #fff;
text-align: center;
padding: 5px 0;}
.side_menu ul{border: 1px solid #464646;
padding: 0;
margin: 0;
background: #fff;}
.side_menu ul li:last-child{border-bottom: none;}
.side_menu ul li.list_b{padding-left: 10px;}
.side_menu ul li.list_a{padding-left: 22px;
background: #E4E4E4;}
}
.side_menu ul li.list_a:before{ content: "└";
font-size: 15px;
color: #bbb;
position: absolute;
top: 33%;
left: 2px;}
.side_menu ul li.list_a,.side_menu ul li.list_b{
position: relative;
z-index: 1;
}
.side_menu ul li.list_a,.side_menu ul li.list_b{border-bottom: dotted 1px #606060;
padding-bottom: 10px;
padding-right: 10px;
padding-top:10px;}
.side_menu ul li.list_a:hover,.side_menu ul li.list_b:hover{background: #606060;
color: #fff;}
.side_menu ul li.list_a a,.side_menu ul li.list_b a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.acd-check{
display: none;
}
.acd-label{
background: #0E4917;
color: #fff;
display: block;
padding: 10px;
text-align: center;
}
@media screen and (max-width: 640px) {
.side_menu{position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;}
.acd-content{
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
height: 40px;
opacity: 1;
padding: 0 ;
visibility: visible;
}
.side_menu ul{
padding: 0;
margin: 0;
width: 100%;
}
.side_menu ul li.list_b{background: #fff;
padding-left: 10px;}
.side_menu ul li.list_a{display: none;}
#sp-header{margin-top: 55px;}
}