@charset "utf-8";
/* CSS Document */

input {
    display: none;
}

/* ポップアップwindow部分 */
#overlay,
#overlay2 {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 70;
    width: 100%;
    height: 100%;
}
/* オーバーレイの背景部分 */
#bg_gray,
#bg_gray2 {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 80;
}

/* ウィンドウ部分 */
#window,
#window2 {
    width: 40%;
    padding: 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.6);
    z-index: 500;
    opacity: 0;
}
/* 閉じるボタン */
#btn_cloth,
#btn_cloth2 {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CCDCEE;
    border-radius: 25px;
    z-index: 800;
    cursor: pointer;
}
#btn_cloth:hover,
#btn_cloth2:hover {
    opacity: 0.7;
}
#btn_cloth span,
#btn_cloth span::before,
#btn_cloth2 span,
#btn_cloth2 span::before {
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #fff;
}
#btn_cloth span,
#btn_cloth2 span {
    transform: rotate(45deg);
}
#btn_cloth span::before,
#btn_cloth2 span::before {
    content: "";
    position: absolute;
    bottom: 0;
    transform: rotate(-90deg);
}


/* クリックで表示 */
#popup:checked ~ #overlay,
#popup2:checked ~ #overlay2 {
    visibility: visible;
}
#popup:checked ~ #overlay #window,
#popup2:checked ~ #overlay2 #window2 {
    animation: fadein 500ms forwards;
    animation-timing-function: ease-in-out;
}
	
@keyframes fadein {
    100% {
        opacity: 1;
    }
}


/* コンテンツ部分のスタイル */

#txt_label,
#txt_label_pc,
#txt_label2,
#txt_label_pc2 {
    cursor: pointer;
	color: #2a6bb3;
}
#txt_label:hover,
#txt_label_pc,
#txt_label2:hover,
#txt_label_pc2 {
    opacity: 0.7;
	text-decoration: underline;
}


#msg a,
#msg2 a {
    display: inline-block;
    color: #fff;
    background: #CE5D8B;
    border-radius: 20px;
    padding: 0.5em 1.5em;
    text-decoration: none;
}
#msg a:hover,
#msg2 a:hover{
    opacity: 0.7;
}
#msg img,
#msg2 img {
	width: 100%;
	margin-top: 10%;
}

@media only screen and (max-width: 767px) {
	
/* ウィンドウ部分 */
#window,
#window2 {
    width: 80%;
    padding: 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.6);
    z-index: 200;
    opacity: 0;
}
/* 閉じるボタン */
#btn_cloth,
#btn_cloth2 {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CCDCEE;
    border-radius: 25px;
    z-index: 800;
    cursor: pointer;
}
#btn_cloth:hover,
#btn_cloth2:hover {
    opacity: 0.7;
}
#btn_cloth span,
#btn_cloth span::before,
#btn_cloth2 span,
#btn_cloth2 span::before{
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #fff;
}
#btn_cloth span,
#btn_cloth2 span {
    transform: rotate(45deg);
}
#btn_cloth span::before,
#btn_cloth2 span::before {
    content: "";
    position: absolute;
    bottom: 0;  
}
}