@charset "UTF-8";

:root{
    --maincolor:#329c7c;
    --subcolor:#cbddd7;
    --basecolor:#f7f7ef;
    --black:#3a3a3a;
    --white:#fff;
    --zoomvalue:1;

    --header-height:60px;
    
    --shippori:"Shippori Mincho", serif;
    --zen:"Zen Old Mincho", serif;

    interpolate-size: allow-keywords;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    max-width: 100%;
}
html,body {
    font-size:16px;
    line-height:1.5;
	scroll-behavior: smooth;
    font-family: var(--shippori);
}
a{ text-decoration:none;}
ul,ol{ list-style:none;}
li{ list-style:none;}
img{ vertical-align:middle; padding: 0; margin: 0;line-height: 0; max-width: 100%;}
table { width:100%;border-collapse: collapse; border-spacing: 0;}


/* @link */
a {text-decoration: none; transition: 0.3s;color: var(--maincolor);}
a:hover,a:active{color: var(--maincolor); text-decoration: none;}
a img{border: none;}

a:hover img {
	opacity: 0.8;
}
a img {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;}


/* @css base block */
.sp{ display:none;}
.tb{ display:none;}
.pc{ display:inline;}

.oh{overflow: hidden;}

.f-min{font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;}
.f-gt{font-family: "游ゴシック","ヒラギノ角ゴ ProN",sans-serif;}
.f-ship{font-family: var(--shippori);}
.f-zen{font-family: var(--zen);}

.cen{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

h1,h2,h3,h4,.bold{font-weight: bold;}

.color{color: var(--maincolor);}
.cen{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.bold{font-weight: bold;}
.small{font-size: 0.9em;line-height: 1.4;}
.big{font-size: 1.1em;line-height: 1.8;}


/*アニメーション設定関連*/
@keyframes fuwa-up-down{
    from{
        translate: 0 40px;
    }
    50%{
        translate: 0 0;
    }
    to{
        translate: 0 40px;
    }
}

@keyframes jiwa{
	0%{
		transform: scale(0.9);
		opacity: 0;
	}
	30%{
		transform: scale(0.95);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes slide-up{
    from{opacity: 0;translate:0 30%;}
    to{opacity: 1; translate:0 0;}
}
@keyframes slide-down{
    from{opacity: 0; translate:0 -30%;}
    to{opacity: 1;  translate:0 0;}
}
@keyframes slide-l{
    from{opacity: 0; translate:50%;}
    to{opacity: 1; translate:0;}
}

@keyframes show-to-right{
    from{clip-path: inset(0 100% 0 0);}
    to{clip-path: inset(0);}
}
@keyframes show-to-left{
    from{clip-path: inset(0 0 0 100%);}
    to{clip-path: inset(0);}
}
@keyframes show-to-bottom{
    from{clip-path: inset(0 0 100% 0);}
    to{clip-path: inset(0);}
}
@keyframes show-to-top{
    from{clip-path: inset(100% 0 0 0);}
    to{clip-path: inset(0);}
}

.circle-animate{
    --r-end:150%;
    clip-path: circle(0% at 50% 50%);;
}
@keyframes show-circle {
    from{clip-path: circle(0% at 50% 50%);}
    to{clip-path: circle(var(--r-end) at 50% 50%);}
}


#breadcrumb ul {
    display: flex;
	justify-content:flex-end;
    gap: 0.3em;
    margin: 50px 0;
	font-size:80%;
}
.post_box #breadcrumb ul{
	justify-content:flex-start;
}

/* ここから下　サイト個別の内容 */

/*全体の箱*/
html{
    font-size: 16px;
}
html.open{
    position: fixed;
    width: 100%;
    z-index: -1;
    overflow: hidden;
}

body { 
    background: var(--basecolor);
    position: relative;
	margin: 0;
	padding: 0;
	color: #222;
	font-size: clamp(8px,calc(1.15rem * var(--zoomvalue)),3rem);
    line-height: 1.6;
    
    &::after{
        content: '';
        height: 100%;
        width: 100%;
        background: url("images/texture.png") repeat center/contain;
        position: absolute;
        opacity: 0.3;
        mix-blend-mode: hard-light;

        top: 0;
        left: 0;
        z-index: -10;
    }
}

main.subpage{
    margin-top: 100px;
}
main > section{
    width: 70%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
    position: relative;
}
.w980{max-width: 980px; margin-left: auto;margin-right: auto;}
.bg{padding: 1.5em 2em;border-radius: 1em;}
.bg_white{background: rgba(255,255,255,0.8);}
.bg_main{background: var(--maincolor);}
.bg_sub{background: var(--subcolor);}
.bg_base{background: var(--basecolor);}

main p{
    text-align: justify;
}
main p + p{
    margin-top: 1em;
}



/*header*/
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    width: 100%;
    padding: 0.5em 1.5em;
    background: rgba(255,255,255,0.9);
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.site_title{
    height: 100%;
    a{
        display: flex;
        gap: 0.5em;
        align-items: center;
        width: fit-content;
        height: 100%;
        color: var(--black);
    }
    .logo{
        max-height: 100%;
        height: auto;
        width: auto;
    }
}

/*メニュー*/
nav{
    height: 100%;
    width: 50%;
}
.menu_list{
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    height: 100%;
    li{
        width: fit-content;
        a{
            display: flex;
            justify-content: center;
            align-items: center;

            height: 100%;
            width: 100%;
            padding: 0 1.2em;
            
            &:hover{
                color: var(--black);
            }
            &.menu_color{
                background: var(--subcolor);
            }
        }
    }
}

.menubtn{display: none;}

/*footer*/

footer{
    margin-top: 5em;
    background: var(--subcolor);
    padding-top: 2em;

    .fot_flex{
        display: flex;
        justify-content: center;
        gap: 20px;
        .fot_left{
            width: 25%;
        }
    }
}

.copy{
	font-size: 0.75rem;
    padding: 1em 0;
    text-align: center;
    color: var(--black);
}


/*見出し*/
.section_title{
    font-size: 180%;
    color: var(--maincolor);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    align-items: center;
    margin: 2em 0 1.5em;
    span{
        font-size: 1.1rem;
        font-weight: normal;
        display: block;
        margin-left: 1em;
    }
    &::before{content: '■';}

    &.cen{
        justify-content: center;
        text-align: center;
        &::before{content: none;}
        span{
            width: 100%;
            margin-left: 0;
        }
    }
    &.color{color: var(--maincolor);}
}
.par_title{
    font-size: 125%;
    font-weight: bold;
    color: var(--maincolor);
    margin: 1.5em auto 1em;
    letter-spacing: 0.1em;
    &:first-child{margin-top: 0;}
}



/*ボタン*/
/*linkbtnと色、形状、サイズをクラス名で指定可*/

.linkbtn{
    width: fit-content;
    margin: 1em auto 1.5em;
    padding: 0.5em 2em;
    background: var(--btn-back-color);
    color: var(--btn-text-color);
    border-width: 2px;
    border-style: solid;
    border-color: var(--btn-border-color);
    transition: 0.3s;
    display: block;
}
.linkbtn:hover{
    background: var(--btn-text-color);
    color: var(--btn-back-color);
    border-color: var(--btn-border-color);
}
/*色*/
.btn_white{
    --btn-back-color:#fff;
    --btn-border-color:var(--maincolor);
    --btn-text-color:var(--maincolor);
}
.btn_color{
    --btn-back-color:var(--maincolor);
    --btn-border-color:var(--maincolor);
    --btn-text-color:#fff;
}
/*形*/
.btn_max_round{
    border-radius: 3em;
}
.btn_min_round{
	border-radius:0.5em;
}
/*サイズ*/
.btn_small{
    font-size: 80%;
    padding: 0.5em 1.5em;
}
.btn_big{
    font-size: 115%;
    padding: 0.5em 5em;
}
.btn_wide{
    width: 100%;
    text-align: center;
}


/*リストの基本形*/
/*list_boxと任意のリスト名クラスを付与し、gapと横列数を指定*/

.list_box{
    display: flex;
    width: 80%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    gap:var(--gap);
}
.list_box > li{
    width: calc((100% - var(--gap) * calc(var(--listitem-length) - 1)) / var(--listitem-length));
}
.list_box.slideup li{
    opacity: 0;
}
.list_box.animation.slideup li{
    animation: slide-up 1.1s forwards;
}


/*点つきリスト*/
.dot-list{
	padding:0 1em;
}
.dot-list,
.dot-list li,
.point_list_box ul,
.point_list_box li{
	list-style:disc;
}
.dot-list li{
	margin-bottom: 0.5em;
}

/*マップ埋め込み用*/

.gmap{
    width: 100%;
    aspect-ratio: 6/4;
    margin: 2em 0;
}
.gmap iframe{
    width: 100%;
    height: 100%;
}

/*トップにもどるボタン*/
.topbtn{
    position: fixed;
    bottom: 2em;
    right: 2em;
    height: 2.5em;
    width: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3em;
    border: 1px solid var(--maincolor);
    color: var(--maincolor);
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    &:hover{
        background: var(--maincolor);
        color: var(--white);
    }
}


/*----------トップページ----------*/



/*ファーストビュー*/

#topimg{
    padding: 0;
    height: calc(80vh);
    overflow: hidden;
    position: relative;

    img{
        width: 100%;
    }
    h1{
        font-size: 220%;
        text-align: center;
        font-weight: normal;
        letter-spacing: 0.1em;

        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;

        color: var(--white);
        text-shadow: 1px 1px 3px #3a3a3a;

        img{max-width: 250px;}
        &.animation{animation: jiwa 3s forwards;}

    }
    .top_copy{
        font-size: 250%;
        position: absolute;
        bottom: 25vh;
        left: 50%;
        translate: -50% 0;
        width: 100%;
        color: var(--black);
        
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1em;
        margin: 0;
        line-height: 1.5;

        &.animation{animation: jiwa 5s forwards;}

        &::before,&::after{
            content: '';
            width: 15%;
            height: 1px;
            background: currentColor;
            display: block;
        }
    }
}

.top_copy{
    font-size: 220%;
    text-align: center;
    margin: 1em auto;
    font-weight: normal;
    line-height: 2.3;

    .animation{
        font-size: 130%;
        animation: show-to-bottom 3s forwards;
        line-height: 1.8;
    }
}


.flex_box{
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin: 4em auto;
    align-items: flex-start;
    &.ma00{margin: 0 auto;}

    .flex_text{
        width: calc(50% - 50px / 2);
        flex-shrink: 0;
    }
    .award{
        font-size: 105%;
        line-height: 1.8;
    }
}

.period{font-size: 130%;letter-spacing: 0.1em;}
.rule_table{
    margin: 2em 0;
    display: flex;
    flex-wrap: wrap;
    gap:1em 0;
    dt{
        width: 25%;
        flex-shrink: 0;
        font-weight: bold;
        padding: 0.3em 0.5em;
        border-left: 3px solid var(--maincolor);
        border-bottom: 1px dotted var(--maincolor);
    }
    dd{
        display: flex;
        align-items: center;
        width: 75%;
        border-bottom: 1px dotted var(--maincolor);
        padding: 0.3em 0;
    }
}

/*スケジュール*/
.sche_list{
    --listitem-length:1;
    --gap:1.5em;
    flex-wrap: wrap;
    width: 60%;

    li{
        background: var(--white);
        padding: 1.5em;
        border-radius: 0.5em;
        text-align: center;
        position: relative;
        h3{color: var(--maincolor);}
        .sche_date{
            text-align: center;
            letter-spacing: 0.1em;
        }
        &:not(:last-child)::after{
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            top: calc(100% + 3px);
            translate: -50% -50%;
            height: 1.5em;
            width: 2em;
            background: var(--maincolor);
            clip-path: polygon(0 0,100% 0,50% 100%);
        }
    }
}


/*エントリー作品*/
#entry_works{max-width: 1500px;}
.entry_list{
    margin: 5em auto;
    --listitem-length:4;
    --gap:2em;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;

    li{
        background: var(--white);
        border-radius: 0.5em;
        position: relative;
        overflow: hidden;

        &::before{
            content: attr(data-num);
            font-family: sans-serif;
            padding: 0.5em 0;
            color: var(--maincolor);
            font-weight: bold;
            font-size: 120%;
            text-align: center;
            display: block;
            width: 100%;
        }
        .entry_img_link,.entry_title,.entry_name{
            padding: 0 1em;
        }

        .entry_img_link{
            display: block;
            text-align: center;
            margin-bottom: 1em;
        }
        .entry_title{
            margin-bottom: 0.3em;
            &::before{content: "『";}
            &::after{content: "』";}
        }
        .entry_name{
            margin-bottom: 1em;
        }
        .entry_details{
            display: flex;
            flex-direction: column;
            transition: 0.3s;
            summary{
                list-style: none;
                background: var(--maincolor);
                width: 100%;
                text-align: center;
                color:var(--white);
                padding: 0.5em;
                cursor: pointer;
                transition: opacity 0.3s;
                &:hover{
                    opacity: 0.8;
                }
            }
            &[open] summary{
                order: 1;
            }
            .entry_text{padding: 0 1em;}
            .entry_link a{padding: 0.5em 0;width: 90%;text-align: center;}
    }

}
}
.lum-lightbox.lum-open{
    z-index: 15;
}


/*-----サブページ-----*/

/*募集要項*/
.rule_list{
    display: flex;
    flex-wrap: wrap;
    gap:1em 0;
    margin-bottom: 3em;
    dt{
        width: 20%;
        background: var(--maincolor);
        color: var(--white);
        font-size: 110%;
        font-weight: bold;
        padding: 1em;
    }
    dd{
        width: 80%;
        background: var(--basecolor);
        padding: 1em 2em;
    }

    .judge_list{
        --listitem-length:3;
        --gap:1em;
        flex-wrap: wrap;
        margin: 2em 0;
        width: 100%;
        li{
            padding:1em;
            background: var(--white);
            p{margin: 0;}
            .linkbtn{margin: 1em 0 0;}
        }
    }
}

/*よくある質問*/
.faqbox{
	background: var(--white);
	border:solid 2px var(--maincolor);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	margin-bottom: 3em;

	li{
		border-bottom:dotted 2px var(--maincolor);
		&:last-child{
			border-bottom: none;
		}
        details[open] .faq_a{border-top: 2px dotted var(--subcolor);}
	}
	summary{
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 20px;
		transition: 0.3s;

		&:hover{
			background: rgba(31, 164, 192,0.2);
		}
	}
	.faq_q{
		color: var(--maincolor);
		font-size: 110%;
		display: flex;
		gap: 0.5em;
        font-weight: bold;

		&::before{
			content: "Q";
			background: var(--maincolor);
			color: var(--white);
			border-radius: 50%;
			width:1em;
			height:1em;
			padding: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
			flex-shrink: 0;
		}
	}
	.faq_a{
		padding: 20px;
		display: flex;
		gap: 0.8em;

		&::before{
			content: "A";
			background:var(--subcolor);
			border-radius: 50%;
			width:1em;
			height:1em;
			padding: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
			flex-shrink: 0;
		}

	}
}

/*応募規約*/
.entry_rule{
    width: 90%;
    max-width: 980px;
    background: rgba(255,255,255,0.5);
    padding: 2em 3em;
    margin: 0 auto;

    h3{
        margin: 2em 0 0.5em;
        color: var(--maincolor);
    }
    .dot_list,.dot_list li{
        list-style:disc inside;
        margin: 0.5em 0;
    }
    ol li{
        list-style: decimal;
        margin: 0.5em 0 0 1.5em;
    }

}
#kakunin{
    display: none;
}

.check_box{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 90%;
    max-width: 30em;
    margin: 2em auto;
    border: 2px solid var(--maincolor);
    background: var(--subcolor);
    padding: 1.5em;
    position: relative;
    cursor: pointer;
    transition: 0.3s all;
}

#kakunin + .check_box::before{
    content: '';
    position: absolute;
    left: 5em;
    width: 1.8em;
    height: 1.8em;
    background: var(--white);
    border: 1px solid var(--maincolor);
    border-radius: 0.3em;
}
#kakunin + .check_box::after{
    content: '';
    position: absolute;
    left: 5.5em;
    width: 0.7em;
    height: 1em;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    transform: translateY(-15%) rotate(45deg);
    display: none;
}
#kakunin:checked + .check_box{
    background: var(--white);
}
#kakunin:checked + .check_box::before{
    background: var(--maincolor);
    }
#kakunin:checked + .check_box::after{
    display: block;
}


#kakunin + label + .btn_item a{
    pointer-events: none;
    background: #aaa;
    display: block;
    color: #fff;
    padding: 1em;
    border: 2px solid var(--maincolor);
    text-align: center;
    font-weight: bold;
}

#kakunin:checked + label + .btn_item a{
    pointer-events: all;
    background: var(--subcolor);
    color: var(--maincolor);
}

/*お問合せ*/

.form{
	margin: 3em auto;
	display: flex;
	flex-direction: column;
	gap:0.7em;

li{
	display: flex;
	background: var(--white);
}
h3,div{
	padding: 1em;
}
h3{
	width: 25%;
	background: var(--subcolor);
	color: var(--maincolor);
	letter-spacing: 0.1em;
}
h3.need::after{
	content: "★";
	margin-left: 0.7em;
}
div{
	width: 75%;
}

textarea,
input[type="text"]{
	padding: 0.5em 0.7em;
	border: 2px solid var(--maincolor);
	border-radius: 0.3em;
	background: #f5f8f5;
	width: 100%;
}
}
.form_btn{
    margin: 3em auto;
    display: block;
    position: relative;
    width: 15em;
    font-size: 120%;
    letter-spacing: 0.1em;
    height: 100%;
    padding: 0.5em 1em;
    color: var(--white);
    border: 1px solid var(--maincolor);
    border-radius: 0.5em;
    background: var(--maincolor);
    text-align: center;
	transition: 0.3s;
    cursor: pointer;
}
.form_btn:hover,
.form_btn:active{
    color: var(--maincolor);
    background: var(--white);

}


/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
	▼　タブレット用css　▼
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/

@media (max-width:1024px) {
    
    /*ヘッダー*/

    /*フッター*/


    /*見出し*/


    /*メインビュー*/
    #topimg{
        height: fit-content;
        h1{
            top: 50%;
        }
        .top_copy{
            bottom: 10%;
            font-size: 120%;
        }
    }

    /*リスト設定*/
    .list_box{
        flex-wrap: wrap;
        /*--listitem-length:2;*/
        --gap:2.5em;
    }




}

@media(max-width:900px){
    header{
        --header-height: 70px;
    }

    #topimg{
        height: auto;
        margin-top: var(--header-height);
        h1{
            width: 100%;
            text-align: center;
            font-size: 0%;
            img{
                width: 20%;
            }
        }
    }


    /*メニュー*/
    #menu{
        position: fixed;
        bottom: 0;
        right: -100%;
        width: 100%;
        height: calc(100% - var(--header-height));
        background: rgba(255,255,255,0.9);
        transition: 0.4s;
        overflow-y: scroll;
    }
    #menu.show{
        right: 0;
    }
    .menu_list{
        padding: 0 2em 2em;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .menu_list > li{
        width: 100%;
        height: auto;
        padding: 0.5em;
        text-align: left;
        flex-direction: column;
    }
    .menu_list li:has(.menu_color){
        padding: 0;
        .menu_color{
            padding: 0.5em;
        }
    }

    /*ハンバーガーボタン*/
    .menubtn{
        position: absolute;
        top: 50%;
        right: 0.5em;
        translate: 0 -50%;
        width: 50px;
        height: 50px;
        text-align: center;
        z-index: 2;
        display: block;
        cursor: pointer;
    }
    .menubtn>div{
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu_btn_item{
        position: relative;
        height: 2px;
        width: 80%;
        border: none;
        background: var(--maincolor);
        transition: 0.3s;
    }
    .menu_btn_item::before,
    .menu_btn_item::after{
        content: '';
        display: block;
        position: absolute;
        background: var(--maincolor);
        height: 100%;
        width: 100%;
        left: 50%;
        translate: -50%;
        transition: all 0.3s;
    }
    .menu_btn_item::before{
        top: -10px;
    }
    .menu_btn_item::after{
        top: 10px;
    }
    .show .menu_btn_item{
        background: transparent;
    }
    .show .menu_btn_item::before{
        top: 0;
        rotate: 35deg;
    }
    .show .menu_btn_item::after{
        top: 0;
        rotate: -35deg;
    }

}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
	▼　スマホ用css　▼
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/

@media (max-width: 600px) {
    
    .pc{display: none;}
    .sp{display: block;}

    #menu{font-size: 110%;}
    .linkbtn{padding: 0.5em 1em;}
    
    /*全体*/
    body{font-size: 0.9rem;}
    main > section{padding: 2em;width: 100%;}

    .section_title{
        width: 100%;
        font-size: 150%;
        span{
            margin-left: 0;
        }
    }
    .site_title{
        font-size: 120%;

    }

    .bg{padding: 1.5em;}
    .list_box{
        width: 100%;
        --gap:1.5em;
    }
    .flex_box{
        flex-direction: column;
        gap:50px;
        &.ma00{
            gap: 0;
        }
        .flex_text{
            width: 100%;
        }
    }
    .fot_flex{
        flex-direction: column;
        align-items: center;
    }




    .entry_list{
        --listitem-length:2;
    }


    .top_copy{
        font-size: 160%;
        line-height: 1.8;
    }


    #intro{
        p.cen{text-align: left;}

        .flex_text{
            .linkbtn{
                margin: 0 auto 0.5em;
            }
        }
    }


    .rule_table{
        gap: 0;
        dt{
            width: 100%;
        }
        dd{
            width: 100%;
            padding-left: 1em;
            margin-bottom: 1em;
            border-left: 3px solid var(--maincolor);
        }
    }


    /*サブページ用*/
    .rule_list{
        gap:0;
        dd,dt{width: 100%;}
        dd{margin-bottom: 1em;}
    
    .judge_list{
        --listitem-length:1;
    }

    }

    .entry_rule{
        padding: 2em;
    }

    #kakunin + .check_box{
        &::before{left: 1.5em;}
        &::after{left:2em;}
    }


    /*contact*/
    .form{
        li{
            flex-direction: column;
            h3,div{width: 100%;padding: 0.5em;}
        }
    }


}


@media(max-width:450px){

}


/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
    ▲　スマホ用css　▲
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/