@charset "utf-8";
/*
Theme Name: hon1_lp
Theme URI: https://www.dik.co.jp/
Version: 2.0.1
Author: DIK
*/

:root {    
    /* Font */    
    --fa: "Font Awesome 6 Free"; /* https://fontawesome.com/search?o=r&m=free */  
    --main-color:#19679E;
    --main-color-rgb:25, 103, 158;
    --main-color-light:#F0F6FA;
    --main-color-light-rgb:240, 246, 250;
    --main-color-perl:#d3dce4;
    --main-color-perl-rgb:211, 220, 228;
    --sub-color-sky:#0097D7;
    --sub-color-sky-rgb:0, 151, 215;
    --sub-color-yellow-light:#FFF8ED;
    --sub-color-yellow-light-rgb:255, 248, 237;
    --sub-color-purple-light:#F8F2FA;
    --sub-color-purple-light-rgb:248, 242, 250;
    --ff-jp1:"Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --ff-en1:"Roboto", sans-serif;
}


* { box-sizing: border-box; }
html { font-size: 62.5%; /* 15px x 0.625 = 10px(=1rem) */ }
body {
	background: #fff;
	font-family:var(--ff-jp1);
	font-size: 1.6rem;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	line-height: 1.7;
    --first-logo-width:12%;
}
/*img {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
}*/
@media only screen and (max-width:999px) {
    body {
        --first-logo-width:20%;
    }
}
/* ------------------------------------------------------- */
/* layout ------------------------------------------------ */
/* ------------------------------------------------------- */

/* base サイトレイアウトの基本設定 ----------------------- */

#top {
	width: 100%;
}
#container {
	max-width: 1115px;
	min-width: 1000px;
	margin: 0 auto 25px;
	padding: 0;
	clear: both;
}
.front #container{
    max-width:100%;
    width: 100%;
    margin: 0 auto 0;
}
#main {
	width: 100%;
}
#side {
	display:none;
}
#footer {
	width: 100%;
	min-width: 1000px;
}
@media only screen and (max-width:999px) {
    #container{
        min-width: 100px;
        width: 100%;
        padding: 0 15px 0 15px;
    }
    .front #container{
        padding: 0 ;
    }
    #main {
        width: 100%;
        float: none;
        margin: 0 0 15px 0;
    }
    .front #main {margin:0;}
    #side {
        display:none;
    }
    #footer {
        min-width: 100px;
        width: 100%;
    }
}

/* ------------------------------------------------------- */
/* header ------------------------------------------------ */
/* ------------------------------------------------------- */

#header {
	/*height: 130px;*/
	width: 100%;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
}
.headerInner {
	/*max-width: 1115px;
	min-width: 1000px;
	margin: 0 auto;*/
}
#top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.headerTitle {
    width:var(--first-logo-width);
    display: flex;
    justify-content: center;
    background-color:var(--main-color);
    padding:0 calc(var(--first-logo-width) / 6) 0 0;
    .logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        writing-mode: vertical-rl;
        font-size:1.84vw;
        letter-spacing: 0.1em;
        a {
            display: block;
            width: 100%;
            height: 100%;    
            color:#fff;
            text-decoration: none;
            padding:calc(2em + 4.15vw) 0 2em;
            position:relative;
            &:hover{
                color:#fff;
            }
            &::before{
                content:"";
                display:inline-block;
                width:3.85vw;
                height:4.15vw;
                background-image: url("images/base/100thlogo.webp");
                background-repeat:no-repeat;
                background-size: 100%;
                position:absolute;
                top:1.3em;
                left:calc(((100% - 3.85vw) / 2) + 2px );
            }
        }
    }
}

.headerRight{
    display:flex;
    align-items: center;
    width:100%;
    justify-content: space-between;
    height:125px;
    padding-right:1em;
    & .headerMenu li {
        display: inline-block;
        margin-left: 15px;
        font-size:1.5rem;
        &::after {
            font-family: var(--fa);
            font-weight: 900;
            content: "\f0da";
            margin-left: 5px;
        }
        &.hdline{
            --line-icon-width:55px;
            display:inline-flex;
            align-items: center;
            line-height:1.5;
            margin-left:calc(var(--line-icon-width) / 2);
            transition-duration: .2s;
            &::after {
                margin-left:calc(var(--line-icon-width) / 2);
                color:#06C755;
            }
            &::before{
                content:"";
                width:var(--line-icon-width);
                height:var(--line-icon-width);
                background-image:url("images/base/lineIcon.webp");
                background-size:100%;
                background-repeat: no-repeat;
                background-position:center;
                display:inline-block;
                margin-right:calc(var(--line-icon-width) / 2);
                
            }
            &:hover{
                 transform: scale(1.05);
            }
            & a{
                text-decoration:none;
                color:#06C755;
            }
        }
    }
}
@media only screen and (max-width:1300px) {
    .headerRight{
        & .headerMenu li {
            font-size:1.15vw;
            &.hdline{
                --line-icon-width:4.23vw;
            }
        }
    }
}
/*スクロール後のメニュー*/
#header.topNav {
	height: 130px;
	width: 100%;
	z-index: 3;
    position:fixed;
    background-color:var(--main-color);
    display:flex;
    justify-content: center;
    & #top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        & .headerTitle {
            width:auto;
            display: flex;
            justify-content: center;
            background-color:transparent;
            padding:0 1em;
            & .logo {
                flex-direction: row;
                align-items: center;
                writing-mode: horizontal-tb;    
                font-size:2.4rem;
                white-space: nowrap;
                & a {
                    display: block;
                    width: 100%;
                    height: 100%;    
                    color:#fff;
                    text-decoration: none;
                    padding:0 0 0 calc(45px + 0.5em);
                    position:relative;
                    &:hover{
                    }
                    &::before{
                        width:45px;
                        height:49px;
                        top:0;
                        left:0;
                    }
                }
            }
        }
        & .headerRight{
            display:flex;
            align-items: center;
            width:100%;
            justify-content: space-between;
            height:125px;
            padding-right:0;
            & .headerMenu{
                margin-right:1em;
                & li {
                    display: inline-block;
                    margin-left: 15px;
                    font-size:1.3rem;
                    &::after {
                        font-family: var(--fa);
                        font-weight: 900;
                        content: "\f0da";
                        margin-left: 5px;
                    }
                    &.hdline{
                        --line-icon-width:40px;
                        background-color:#fff;
                        border-radius:8px;
                        padding:calc(var(--line-icon-width) / 2);
                        display:inline-flex;
                        align-items: center;
                        line-height:1.5;
                        margin-left:calc(var(--line-icon-width) / 2);
                        &::after {
                            margin-left:calc(var(--line-icon-width) / 2);
                            color:#06C755;
                        }
                        &::before{
                            content:"";
                            width:var(--line-icon-width);
                            height:var(--line-icon-width);
                            background-image:url("images/base/lineIcon.webp");
                            background-size:100%;
                            background-repeat: no-repeat;
                            background-position:center;
                            display:inline-block;
                            margin-right:calc(var(--line-icon-width) / 2);
                        }
                        & a{
                            text-decoration:none;
                            color:#06C755;
                        }
                    }
                }
            }
        }
    }
}
@media only screen and (max-width:1300px) {
    #header.topNav {
        & #top {
            & .headerTitle {
                & .logo {
                    font-size:1.84vw;
                    & a {
                        padding:0 0 0 calc(3.64vw + 0.5em);
                        &::before{
                            width:3.46vw;
                            height:3.77vw;
                            top:0;
                            left:0;
                        }
                    }
                }
                & .headerRight{
                    & .headerMenu{
                        & li {
                            font-size:1vw;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width:999px) {
	.headerInner {
		/*width: 100%;
		min-width: 100px;
		padding: 10px;*/
	}
    #header{
        z-index:1;
        & #top {
            display: block;
            .headerTitle {
                width:var(--first-logo-width);
                padding:0;
                .logo { 
                    font-size:5vw;
                    a {
                        padding:calc(2em + 6.67vw) 0 2em;
                        &:hover{
                        }
                        &::before{
                            width:6.67vw;
                            height:7.2vw;
                            background-image: url("images/base/100thlogo.webp");
                            left:calc(((100% - 6.67vw) / 2) + 1px );
                        }
                    }
                }
            }
            .headerRight{
                display: none;
                & .headerMenu{
                    display: none;
                }
            }
        }
        &.topNav{
        display:none;
        }
    }
}

/* ------------------------------------------------------- */
/* footer ------------------------------------------------ */
/* ------------------------------------------------------- */

#footer {
    display:flex;
    flex-direction: column;
    & .footerInner {
        max-width: 1115px;
        min-width: 1000px;
        margin: 0 auto;
        padding: 30px 0 25px;
        display:flex;
        justify-content: center;
    }
    & .footerMenu {
        background-color:var(--main-color);
        text-align: center; 
        & ul{
            display:flex;
            flex-wrap: wrap;
            justify-content: center;
            gap:0.5em 1em;
            width:650px;
            & li {
                display: inline-block;
                position: relative;
                &::before{
                    background-color:#fff;
                    content: '';
                    width: 100%;
                    height: 1px;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    transform-origin: right top;
                    transform: scale(0, 1);
                    transition: transform .3s;
                }
                &:hover::before {
                    transform-origin: center top;
                    transform: scale(1, 1);
                }
                & a{
                    color:#fff;
                    text-decoration: none;
                }
            }
        }
    }
    & .footerInfo {
        background-color:#fff;
        text-align:center;
        & address{
            display:flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color:#333;
            font-size:2.3rem;
            &::before{
                content:"";
                width:73px;
                height:80px;
                background-image:url("images/base/ft100thlogo.webp");
                background-repeat:no-repeat;
                backgrond-position:center;
                background-size:100%;
                display:inline-block;
                margin-right:1em;
            }
        }
    }    
}
#copyright {
    text-align: center;
    color:#666666;
    font-size: 1.3rem;
    padding: 5px;
}
@media only screen and (max-width:1300px) {
    #footer {
        display:flex;
        flex-direction: column;
        & .footerInner {
            max-width: 1115px;
            min-width: 1000px;
            margin: 0 auto;
            padding: 30px 0 25px;
            display:flex;
            justify-content: center;
        }
        & .footerMenu {
            & ul{
                width:50vw;
                font-size:1.23vw;
            }
        }
        & .footerInfo {
            & address{
                font-size:1.77vw;
                &::before{
                    width:5.62vw;
                    height:6.15vw;
                }
            }
        }    
    }
    #copyright {
        text-align: center;
        color:#666666;
        font-size: 1.3rem;
        padding: 5px;
    }
    
}
.fixLine{display:none;}
@media only screen and (max-width:999px) {
    #footer {
        display:flex;
        flex-direction: column;
        padding-bottom:150px;
        & .footerInner {
            width: 100%;
            min-width: 100px;
            display: block;
            padding: 15px;
        }
        & .footerMenu {
            & ul{
                width:100%;
                font-size:1.5rem;
            }
        }
        & .footerInfo {
            & address{
                font-size:2rem;
                &::before{
                    width:50px;
                    height:55px;
                }
            }
        }    
    }
}
.fixMenu{
    position:fixed;
    right:0;
    top:23%;
    display:flex;
    flex-direction: column;
    gap:1em;
    & .hs{--school-color:#0097D7}
    & .jhs{--school-color:#006ebc}
    & div{
        box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.6);
        transition-duration: .2s;
        & a{
            text-decoration:none;
            color:#fff;
            & dl{
                & dt{
                    background-color:#fff;
                    color:var(--school-color);
                    text-align:center;
                    font-size:1.3rem;
                }
                & dd{
                    background-color:var(--school-color);
                    border:1px solid #fff;
                    writing-mode: vertical-rl;  
                    width:100%;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    padding:1em 0.5em 1.5em 0.5em;
                    line-height:1.5;
                    font-size:1.2rem;
                    &::before{
                        content:"";
                        background-image:url("images/base/fix-info-icon.webp");
                        width:22px;
                        height:23px;
                        background-size:100%;
                        background-position:center;
                        background-repeat: no-repeat;
                        display:inline-block;
                        margin-bottom:1em;
                        /*content:"\f073";
                        font-size:2.2rem;
                        line-height:1;
                        font-family: var(--fa);
                        font-weight:300;*/
                    }
                }
            }
        }
        &:hover{
            transform: scale(1.1);
        }
    }
}
@media only screen and (max-width:999px) {
    .fixMenu{
        width:100%;
        right:auto;
        top:auto;
        bottom:0;
        flex-direction:row;
        gap:0;
        padding:5px;
        background-color:var(--main-color);
        justify-content: space-between;
        z-index:3;
        & div{
            width:calc((100% - 5px)/2);
            & a{
                & dl{
                    display:flex;
                    & dt{
                        writing-mode: vertical-rl;
                        font-size:1.3rem;
                    }
                    & dd{
                        writing-mode: horizontal-tb;  
                        width:100%;
                        display:inline-flex;
                        justify-content: center;
                        align-items: center;
                        padding:0.5em;
                        line-height:1.5;
                        font-size:1.2rem;
                        height:50px;
                        &::before{
                            content:"";
                            background-image:url("images/base/fix-info-icon.webp");
                            width:22px;
                            height:23px;
                            display:inline-block;
                            backgrond-size:100%;
                            background-position:center;
                            background-repeat: no-repeat;
                            margin-bottom:0;
                            margin-right:1em;
                        }
                    }
                }
            }
        }
    }
    .fixLine{
        position:fixed;
        bottom:60px;
        display:flex;
        padding:5px;
        background-color:#06C755;;
        width:100%;
        z-index:2;
        & div{
            background-color:#fff;
            height:80px;
            width:100%;
            --line-icon-width:40px;
            display:flex;
            justify-content: center;
            align-items: center;
            line-height:1.5;
            padding:calc(var(--line-icon-width) / 2);
            position:relative;
            &::after {
                font-family: var(--fa);
                font-weight: 900;
                content: "\f0da";
                margin-left:calc(var(--line-icon-width) / 2);
                color:#06C755;
            }
            &::before{
                content:"";
                width:var(--line-icon-width);
                height:var(--line-icon-width);
                background-image:url("images/base/lineIcon.webp");
                background-size:100%;
                background-repeat: no-repeat;
                background-position:center;
                display:inline-block;
                margin-right:calc(var(--line-icon-width) / 2);
                
            }
            & a{
                text-decoration:none;
                color:#06C755;
                font-size:1.6rem;
            }
        }
    }
}
/* ------------------------------------------------------- */
/* side -------------------------------------------------- */
/* ------------------------------------------------------- */

#side {}

/* Widget */
.widget ul li {
	border-bottom: 1px dotted #CCC;
	margin-bottom: 5px;
	padding: 0 10px 0px 10px;
	font-size: 1.4rem;
}
.widget ul li a {
	display: block;
}
.tagcloud a {
	border-bottom: 1px dotted #CCC;
	margin-bottom: 5px;
	padding: 0 10px 0px 10px;
	font-size: 1.4rem !important;
	display: block;
}
.archive_month select {
	width: 96%;
	margin: 0 2%;
}

/* ------------------------------------------------------- */
/* プリント用 -------------------------------------------- */
/* ------------------------------------------------------- */

@media print {	
    #humberger, #pageTop, #pageTop div, #movePageTop, #pageTop p {
        display: none!important;
    }
    #container {
        padding: 0!important;
    }
    #header {
        position: static!important;
    }
    .topContents {
        min-width: 1000px!important;
        width: 100%!important;
        margin: 0!important;
        padding: 0!important;
        overflow: hidden!important;
    }
}

/* ------------------------------------------------------- */
/* dark mode --------------------------------------------- */
/* ------------------------------------------------------- */

/*@media (prefers-color-scheme: dark) {
	html { filter: invert(1) hue-rotate(180deg); }
	html img { filter: invert(1) hue-rotate(180deg); }
}*/