@charset "UTF-8";
/*
Theme Name: iikotochallenge
Version: 0.0.0
*/
:root {
    --base-width: 1200;
}
@media screen and (max-width: 767px) {
    :root {
        --base-width: 640;
    }
}
:root {
    --vw: calc(var(--base-width)/100);
    --aside-width: min(calc(250vw/var(--vw)), 250px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
img { border: none; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
td, th { font-weight: inherit; }
ul, ol { margin-left: 2.0em; }
a { color: inherit; }
em { font-style: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
button, input[type="button"], input[type="submit"] { cursor: pointer; border: none; background: transparent; outline: none; appearance: none; -webkit-appearance: none; }
button img { width: 100%; }
video { filter: drop-shadow(0px 0px rgba(0,0,0,0)); outline: none; border: none; }

body { font-size: min(calc(18vw/var(--vw)), 18px); }
p { margin-top: 1.0em; margin-bottom: 1.0em; }
em { font-weight: bold; }
small { font-size: 80%; }
section { margin-bottom: min(calc(100vw/var(--vw)), 100px); }

.section-title-1 { font-size: min(calc(24vw/var(--vw)), 24px); color: #fff; background: #00b0ec; border-radius: min(calc(10vw/var(--vw)), 10px); padding: min(calc(10vw/var(--vw)), 10px) min(calc(20vw/var(--vw)), 20px); margin-bottom: min(calc(30vw/var(--vw)), 30px); }
.news-item { display: flex; font-size: min(calc(20vw/var(--vw)), 20px); padding: min(calc(10vw/var(--vw)), 10px); }
.news-item:not(:last-child) { border-bottom: 1px solid #f3f3f3; }
.news-item .date { flex: 0 0 min(calc(140vw/var(--vw)), 140px); }
.news-item .title { flex: 1 1; }
.information-items { display: grid; gap: min(calc(20vw/var(--vw)), 20px); padding: 0 min(calc(10vw/var(--vw)), 10px); }
.information-item { text-align: center; background: #f4f4f4; border-radius: min(calc(10vw/var(--vw)), 10px); padding: min(calc(10vw/var(--vw)), 10px); }
.information-item a { text-decoration: none; }
.information-item .title { font-size: min(calc(24vw/var(--vw)), 24px); font-weight: bold; padding: min(calc(10vw/var(--vw)), 10px) 0; }

#page { overflow: hidden; }

#aside .aside-section { margin-bottom: min(calc(50vw/var(--vw)), 50px); }

#footer .copyright { color: #fff; text-align: center; background: #00b0ec; padding: 10px; }
#footer .copyright p { margin: 0; }

#main.front-page .section-title-1 { border-radius: 0; }
#main.front-page .section-title-1 .wrapper { display: block; }
section.home-main-image { text-align: center; }
section.home-main-image img { width: 100%; }


/**
 * SP
 */
@media screen and (max-width: 767px) {

    body { font-size: min(calc(25vw/var(--vw)), 25px); }
    section { margin-bottom: min(calc(50vw/var(--vw)), 50px); }

    .visible-pc { display: none; }
    .wrapper { width: calc(100% - 20px); margin-left: auto; margin-right: auto; }
    .section-title-1 { font-size: min(calc(30vw/var(--vw)), 30px); }
    .news-item { font-size: min(calc(25vw/var(--vw)), 25px); }
    .news-item .date { flex: 0 0 min(calc(160vw/var(--vw)), 160px); }

    #page { display: flex; flex-direction: column; background: #f0f8ff; }
    #nav { order: 1; }
    #main { order: 2; }
    #aside { order: 3; }
    #footer { order: 4; }

    #header { display: flex; justify-content: space-between; background: #fff; height: min(calc(80vw/var(--vw)), 80px); }
    #header .logo { padding-left: min(calc(20vw/var(--vw)), 20px); }
    #header .logo img { width: min(calc(460vw/var(--vw)), 460px);  }
    #header .links { display: none; }
    #header .nav-button { display: flex; justify-content: center; align-items: center; background: #00b0ec; width: min(calc(100vw/var(--vw)), 100px); }
    #header .nav-button img { width: min(calc(50vw/var(--vw)), 50px); }
    #header .nav-button-close { display: none; }
    body.nav-open { overflow: hidden; }
    body.nav-open #header .nav-button-open { display: none; }
    body.nav-open #header .nav-button-close { display: flex; }

    #nav { position: absolute; z-index: 1000; left: 0; right: 0; top: min(calc(80vw/var(--vw)), 80px); bottom: 0; background: #00b0ec; overflow: auto; display: none; }
    #nav ul { list-style-type: none; margin: 0; }
    #nav ul > li > a { display: block; font-size: min(calc(30vw/var(--vw)), 30px); text-decoration: none; padding: min(calc(20vw/var(--vw)), 20px) min(calc(50vw/var(--vw)), 50px) min(calc(20vw/var(--vw)), 20px) min(calc(20vw/var(--vw)), 20px); }
    #nav > ul { padding: min(calc(20vw/var(--vw)), 20px) 0 ; }
    #nav > ul > li { border-bottom: 1px solid #fff; }
    #nav > ul > li > a { position: relative; color: #fff; }
    #nav > ul > li.has-children > a::after { content: ""; display: block; position: absolute; right: min(calc(20vw/var(--vw)), 20px); top: 0; bottom: 0; width: min(calc(28vw/var(--vw)), 28px); height: min(calc(17vw/var(--vw)), 17px); margin: auto; background: url(images/nav-sub-open.png) no-repeat center; background-size: contain; }
    #nav > ul > li.open > a::after { background-image: url(images/nav-sub-close.png); }
    #nav > ul > li > ul { background: #f0f8ff; display: none; }
    #nav > ul > li.open > ul { display: block; }
    #nav > ul > li > ul > li { border-bottom: 1px solid #fff; }
    #nav > ul > li > ul > li > a { color: #122a88; padding-left: min(calc(40vw/var(--vw)), 40px); }
    #nav .links { padding: min(calc(20vw/var(--vw)), 20px) 0; }
    #nav .links .sns { display: flex; justify-content: center; gap: min(calc(40vw/var(--vw)), 40px); margin: min(calc(20vw/var(--vw)), 20px) 0; }
    #nav .links .sns img { width: min(calc(70vw/var(--vw)), 70px); }
    #nav .links .banner { text-align: center; margin: min(calc(20vw/var(--vw)), 20px) 0; }
    #nav .links .banner img { width: min(calc(620vw/var(--vw)), 620px); }

    #aside { background: #00b0ec; border-radius: min(calc(10vw/var(--vw)), 10px); padding: min(calc(10vw/var(--vw)), 10px); margin: 0 min(calc(10vw/var(--vw)), 10px) min(calc(50vw/var(--vw)), 50px); }
    #aside .aside-section-title { text-align: center; font-size: min(calc(30vw/var(--vw)), 30px); font-weight: 500; background: #fff; border-radius: min(calc(10vw/var(--vw)), 10px); padding: min(calc(10vw/var(--vw)), 10px); margin-bottom: min(calc(20vw/var(--vw)), 20px); }
    #aside .aside-section-banners .banners { display: grid; grid-template-columns: repeat(2, 1fr); gap: min(calc(10vw/var(--vw)), 10px); }
    #aside .aside-section-banners-pamphlet .banners { display: block; }
    #aside .aside-section-banners-pamphlet .banner { color: #fff; text-align: center; }
    #aside .aside-section-banners-pamphlet .banner img { display: block; margin: 0 auto min(calc(20vw/var(--vw)), 20px); }

    #footer .menu .menu-item ul { display: flex; justify-content: center; list-style-type: none; margin: 0; padding: min(calc(10vw/var(--vw)), 10px) 0; }
    #footer .menu .menu-item ul > li { position: relative; padding: 0 min(calc(10vw/var(--vw)), 10px); }
    #footer .menu .menu-item ul > li:not(:last-child)::after { content: ""; display: block; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background: #000; }
    #footer .menu .menu-item a { text-decoration: none; }
    #footer .menu .menu-item-pc { display: none; }

    #main.front-page .section-title-1 { margin-left: max(calc(-20vw/var(--vw)), -20px); margin-right: max(calc(-20vw/var(--vw)), -20px); }
    section.home-news { background: #fff; padding: min(calc(20vw/var(--vw)), 20px); }
    section.home-news .news { margin-bottom: min(calc(30vw/var(--vw)), 30px); }
    section.home-news .facebook { text-align: center; }
    section.home-information { background: #fff; padding: min(calc(20vw/var(--vw)), 20px); }
}

/**
 * PC・タブレット
 */
@media screen and (min-width: 768px) {

    a, button, .content-link { cursor: pointer; transition: opacity 0.5s; }
    a:hover, button:hover, .content-link:hover { opacity: 0.7; }

    .visible-sp { display: none; }
    .wrapper { width: min(calc(100% - 20px), 1200px); margin-left: auto; margin-right: auto; }
    .information-items { grid-template-columns: repeat(3, 1fr); }
    .fit-obj { border: none; max-width: 80%; height: auto; }

    #nav { float: left; width: calc(100% - var(--aside-width)); }
    #main { float: left; width: calc(100% - var(--aside-width)); }
    #aside { float: right; width: var(--aside-width); }
    #footer { float: left; width: calc(100% - var(--aside-width)); }

    #header { display: flex; justify-content: space-between; padding: 0 min(calc(20vw/var(--vw)), 20px); }
    #header .links { display: flex; gap: min(calc(40vw/var(--vw)), 40px); }
    #header .links .sns { display: flex; align-items: center; gap: min(calc(20vw/var(--vw)), 20px); }
    #header .nav-button { display: none; }

    #nav ul { list-style-type: none; margin: 0; }
    #nav a { text-decoration: none; }
    #nav a:hover { opacity: 1; }
    #nav > ul { display: flex; }
    #nav > ul > li { position: relative; display: flex; align-items: center; flex: 1 1; border-top: 3px solid #00b0ec; border-bottom: 3px solid #00b0ec; }
    #nav > ul > li > a { display: block; color: #122a88; font-size: min(calc(24vw/var(--vw)), 24px); text-align: center; flex: 1 1; padding: min(calc(20vw/var(--vw)), 20px) min(calc(10vw/var(--vw)), 10px); }
    #nav > ul > li:hover > a { position: relative; color: #fff; }
    #nav > ul > li:hover > a::after { content : ""; display: block; position: absolute; z-index: -1; left: 0; right: 0; top: 15%; height: 70%; background: #00b0ec; }
    #nav > ul > li:not(:first-child) > a::before { content: ""; display: block; position: absolute; left: 0; top: 15%; height: 70%;  width: 2px; background: #00b0ec; }
    #nav > ul > li > ul { position: absolute; z-index: 1000; left: 0; right: 0; top: calc(100% + 3px); display: none; }
    #nav > ul > li > ul > li { border-bottom: 1px solid #00b0ec; }
    #nav > ul > li > ul > li > a { display: block; color: #122a88; font-size: min(calc(20vw/var(--vw)), 20px); text-align: center; background: rgba(255,255,255,1); padding: min(calc(10vw/var(--vw)), 10px); }
    #nav > ul > li > ul > li:hover > a { background: rgba(0,176,236,1); }
    #nav .links { display: none; }

    #aside .aside-section-title { display: flex; justify-content: center; align-items: center; text-align: center; font-size: min(calc(20vw/var(--vw)), 20px); font-weight: 500; background: #f3f3f3; padding: min(calc(10vw/var(--vw)), 10px); min-height: min(calc(80vw/var(--vw)), 80px); }
    #aside .aside-section-banners .banner { color: #008dce; font-size: min(calc(20vw/var(--vw)), 20px); text-align: center; }
    #aside .aside-section-banners-pamphlet .banner { color: #008dce; font-size: min(calc(20vw/var(--vw)), 20px); text-align: center; }

    #footer { background: url(images/footer-bg.png) no-repeat center; background-size: cover; }
    #footer::before { content: ""; display: block; background: #00b0ec; height: min(calc(30vw/var(--vw)), 30px); }
    #footer .menu { width: min(calc(100% - 20px), 1000px); margin: 0 auto; }
    #footer .menu .menu-items { display: flex; gap: min(calc(10vw/var(--vw)), 10px); padding: min(calc(30vw/var(--vw)), 30px) 0; }
    #footer .menu .menu-item { flex: 1 1; }
    #footer .menu .menu-item h2 { color: #46467b; font-size: min(calc(20vw/var(--vw)), 20px); font-weight: bold; margin-bottom: min(calc(20vw/var(--vw)), 20px); }
    #footer .menu .menu-item ul { color: #46467b; font-size: min(calc(20vw/var(--vw)), 20px); list-style-type: none; margin-left: min(calc(10vw/var(--vw)), 10px); }
    #footer .menu .menu-item li { position: relative; padding-left: 1.0em; margin-bottom: min(calc(10vw/var(--vw)), 10px); }
    #footer .menu .menu-item li::before { content: "・"; display: block; position: absolute; left: 0; }
    #footer .menu .menu-item a { text-decoration: none; }
    #footer .menu .menu-item-sp { display: none; }
    #footer .copyright { font-size: min(calc(20vw/var(--vw)), 20px); }

    section.home-news { display: flex; gap: min(calc(30vw/var(--vw)), 30px);  }
    section.home-news .news { width: 100%; }
    section.home-news .facebook { width: 100%; text-align: center; }

}