@charset "UTF-8";
/* Custom */
#container #main h1 span { position: relative; padding: .3em 0 .2em 1em; border-bottom: 3px solid #ebb800; color: #585858; }
#container #main h1 span::before { position: absolute; top: 0; left: .3em; transform: rotate(55deg); height: 11px; width: 12px; background: #ebb800; content: ''; }
#container #main h1 span::after { position: absolute; transform: rotate(15deg); top: .6em; left: 0; height: 8px; width: 8px; background: #ebb800; content: ''; }
#container #main h2 span { display: flex; justify-content: center; align-items: center; color: #585858; margin: 60px 0 40px; }
#container #main h2 span::before,
#container #main h2 span::after { width: 6px; height: 40px; background-color: #65aa70; content: ''; }
#container #main h2 span::before { transform: rotate(-35deg); margin-right: 30px; }
#container #main h2 span::after { transform: rotate(35deg); margin-left: 30px; }
#list { width: 31%; float: left; margin: 0 1%; padding: 0; display: block; }
#list #space { width: 100%; padding: 40px 0 0; display: block; }
#list ul { width: auto; margin: 0; }
#list li { background: #fff; width: 96%; float: left; margin: 0 0 6%; padding: 0; display: block; border-radius: 15px; }
#list li h2 { background: #778e79; color: #fff; font-size: 130%; line-height: 140%; text-align: left; font-weight: bold; margin: 0; padding: 10px 3% 10px 5%; border-radius: 10px 10px 0 0; }
#list li p { line-height: 130%; margin: 15px 3% 15px 6%; padding: 0; }
#list li #day { font-size: 80%; text-align: center; }
#list li #btn a { color: #778e79; text-align: center; background: #fff; width: 70%; float: left; margin: 0 14% 13px; padding: 3px 0; border: solid 2px #778e79; border-radius: 10px; }
#list li #btn a:hover { opacity:0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }
#clum3 ul:nth-child(1) { width: 22%; }
#clum3 ul:nth-child(2) { width: 28%; }
#clum3 ul:nth-child(3) { width: 37%; }
/* shadow */
#sb_container #sb_main { font-size: 115%; line-height: 160%; background-color: #fff; width: 64%; float: left; margin: 5% 10%; padding: 5% 8%; display: block; border-radius: 15px; }
#sb_container #sb_main h1 { text-align: center; font-size: 150%; line-height: 180%; font-weight: bold; margin: 30px 1%; padding: 0; }
#sb_container #sb_main h1 span { position: relative; padding: .3em 0 .2em 1em; border-bottom: 3px solid #ebb800; color: #585858; }
#sb_container #sb_main h1 span::before { position: absolute; top: 0; left: .3em; transform: rotate(55deg); height: 11px; width: 12px; background: #ebb800; content: ''; }
#sb_container #sb_main h1 span::after { position: absolute; transform: rotate(15deg); top: .6em; left: 0; height: 8px; width: 8px; background: #ebb800; content: ''; }
#sb_navi { display: none; } 
#copy { color: #fff; }
#cycl_emotion { font-size: 80%; width: 100%; float: left; margin: 0; padding: 30px 0 0; display: block; }
#cycl_emotion li { text-align: center; width: auto; float: left; }
#cycl_day { text-align: right; width: 100%; float: left; margin: 0; padding: 0; display: block; }

/* PC用 */
@media only screen and (min-width: 1001px) {
#img_container { height: 75vh; }
p { padding: 0 45px; }
#quesQ { margin: 2% 45px; }
#quesA { margin: 0 45px; }
#quesA p { padding: 0; }
}

/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {
}

/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {
}

/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
#container2 #main { width: 94%; float: left; padding: 5% 3%; display: block; }
#list { width: 94%; margin: 0 3%; }
#list #space { display: none; }
}

/* Mobile2用 */
@media screen and (max-width: 540px) {
#container2 #main { width: 94%; float: left; padding: 5% 3%; display: block; }
#list { width: 94%; margin: 0 3%; }
#list #space { display: none; }
}