@charset "utf-8";
@media screen and (max-width:767px) {
    /*		Contents
---------------------------------------------------------------------------

	Common（共通部分）

	HOME								[ / ]
	100年の歴史タイムライン				[ /timeline/ ]
	卒業生インタビュー					[ /interview/ ]
	100年の歴史　思い出投稿				[ /entry/ ]
	活動報告							[ /report/ ]

------------------------------------------------------------------------ */
    /* ========================================================================
	Common（共通部分）
======================================================================== */
    body {
        min-width: 320px;
    }
    .pc {
        display: none;
    }
    iframe {
        width: 100%;
        height: 240px;
    }
    /* ----------------------------------------
	header
---------------------------------------- */
    header h1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 590px;
        padding: 158px 0 0 0;
        background: #f5ecd5;
        text-align: center;
    }
    header h1 img {
        position: relative;
        z-index: 1;
    }
    /* ----------------------------------------
	menu
---------------------------------------- */
    #menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    }
    #menu .btn {
        position: absolute;
        top: 24px;
        right: 0;
        width: 68px;
        height: 56px;
        background: url(../../img/common/btn_menu.png) no-repeat;
        background-size: 100%;
        cursor: pointer;
        z-index: 1;
    }
    #menu .btn.close {
        background-image: url(../../img/common/btn_menu_close.png);
    }
    #menu .btn span {
        display: none;
    }
    #menu>ul {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        min-width: 320px;
        width: 100%;
        height: 100%;
        padding: 80px 0 0 0;
        background: #000064;
    }
    #menu ul ul {
        display: none;
    }
    #menu ul li {
        position: relative;
        border-top: 1px solid #4a4a91;
    }
    #menu>ul>li:last-child {
        border-bottom: 1px solid #4a4a91;
    }
    #menu ul li a {
        display: block;
        padding: 0 20px;
        font-family: "Noto Serif JP";
        font-size: 2.0rem;
        color: #ffffff;
        line-height: 52px;
        letter-spacing: 0.01em;
        text-decoration: none;
        transition-duration: 0.2s;
    }
    #menu ul ul li a {
        font-size: 1.6rem;
    }
    #menu ul li span {
        position: absolute;
        top: 0;
        right: 0;
        width: 54px;
        height: 52px;
        font-size: 0;
    }
    #menu ul li span::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(../../img/common/btn_open.png) no-repeat center #000064;
        cursor: pointer;
        transition-duration: 0.2s;
    }
    #menu ul li span.close::before {
        background-image: url(../../img/common/btn_close.png)
    }
    /* ----------------------------------------
	main
---------------------------------------- */
    main h1 {
        font-family: "Noto Serif JP";
        font-size: 3.8rem;
        letter-spacing: 0.18em;
        line-height: 62px;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    /* ----------------------------------------
	footer
---------------------------------------- */
    footer {
        background: #000064;
        text-align: center;
        color: #ffffff;
    }
    footer .menu {
        display: none;
    }
    /* office
---------------------------------------- */
    footer .office {
        display: inline-block;
        padding: 50px 30px;
        text-align: left;
    }
    footer .office h2 {
        padding: 0 0 20px 0;
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 28px;
    }
    footer .office dl {
        padding: 20px 0;
    }
    footer .office p,
    footer .office dl dt,
    footer .office dl dd {
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 24px;
    }
    footer .office a {
        color: #ffffff;
    }
    footer .office p a {
        text-decoration: underline;
    }
    /* ========================================================================
	HOME								[ / ]
======================================================================== */
    #home h2:not(.not) {
        font-family: "Noto Serif JP";
        font-size: 3.8rem;
        letter-spacing: 0.18em;
        line-height: 62px;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    /* ----------------------------------------
	anniversary
---------------------------------------- */
    #home .anniversary {
        overflow: hidden;
        position: relative;
        padding: 604px 20px 60px;
    }
    #home .anniversary .image {
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        /* Android */
        transform: translateX(-50%);
    }
    #home .anniversary .image img {
        max-width: none;
    }
    #home .anniversary .inner {
        text-align: center;
    }
    #home .anniversary .inner>* {
        text-align: left;
    }
    #home .anniversary h2.vertical-text {
        display: inline-block;
        margin: 0 -20px;
        padding: 30px 0 0px 0;
        font-size: 6.0rem;
        letter-spacing: 0.18em;
        line-height: 1.63;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        height: 8em;
    }
    #home .anniversary p.lead {
        padding: 0 0 20px 0;
        font-family: "Noto Serif JP";
        font-size: 2.6rem;
        line-height: 38px;
    }
    #home .anniversary dl {
        padding: 0 0 20px 0;
    }
    #home .anniversary dl dd {
        font-size: 1.8rem;
        line-height: 32px;
    }
    #home .anniversary dl dd span {
        display: inline-block;
        font-size: 1.4rem;
        line-height: 1;
    }
    /* ----------------------------------------
	report
---------------------------------------- */
    #home .report {
        padding: 40px 0 20px 0;
        background: url(../../img/common/bg_report_sp.png) no-repeat center 36px #f5ecd5;
        background-size: 375px auto;
    }
    #home .report .inner {
        overflow: hidden;
    }
    #home .report h2 {
        float: right;
        width: 100%;
        padding: 0 30px 40px 0;
        font-size: 4.4rem;
        line-height: 1;
        letter-spacing: 0.22em;
    }
    #home .report ul {
        overflow: visible;
    }
    #home .report ul li {
        width: 240px;
        margin: 0 auto 20px;
    }
    #home .report ul li a {
        color: #333333;
        text-decoration: none;
    }
    #home .report ul li img {
        margin: 0 0 10px 0;
    }
    /* ----------------------------------------
	sns
---------------------------------------- */
    #home .sns {
        padding: 40px 0 20px 0;
        background: url(../../img/home/bg_sns_sp.png) no-repeat center 34px #e6e6f0;
        background-size: 375px auto;
    }
    #home .sns h2 {
        padding: 0 0 40px 46px;
    }
    #home .sns ul li {
        width: 272px;
        margin: 0 auto 20px;
    }
    #home .sns ul li a {
        display: block;
        height: 272px;
        padding: 50px 0 0 0;
        background: #ffffff;
        text-align: center;
        font-family: "Noto Serif JP";
        color: #333333;
        line-height: 1;
        letter-spacing: 0.18em;
        text-decoration: none;
    }
    #home .sns ul li h3 {
        padding: 0 0 38px 0;
        font-size: 2.4rem;
    }
    #home .sns ul li img {
        display: block;
        margin: 0 auto 22px;
    }
    /* ========================================================================
	100年の歴史タイムライン				[ /timeline/ ]
======================================================================== */
    /* ----------------------------------------
	title
---------------------------------------- */
    #timeline .title {
        overflow: hidden;
        position: relative;
        padding: 462px 20px 40px;
    }
    #timeline .title h1 {
        position: absolute;
        top: 90px;
        right: 12px;
        z-index: 1;
    }
    #timeline .title .image {
        position: absolute;
        top: 70px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        /* Android */
        transform: translateX(-50%);
    }
    #timeline .title .image img {
        max-width: none;
    }
    #timeline .title p.lead {
        padding: 0 0 20px 0;
        font-family: "Noto Serif JP";
        font-size: 2.4rem;
        line-height: 38px;
        letter-spacing: 0.07em;
    }
    #timeline .title .btn {
        max-width: 340px;
        margin: 0 auto;
        padding: 30px 10px 0;
    }
    #timeline .title .btn a {
        display: block;
        background: #000064;
        text-align: center;
        font-family: "Noto Serif JP";
        font-size: 2.8rem;
        color: #ffffff;
        line-height: 56px;
        letter-spacing: 0.1em;
        text-decoration: none;
    }
    /* ----------------------------------------
	timeline
---------------------------------------- */
    #timeline .timeline {
        padding: 20px 0 40px 0;
        background: url(../../img/timeline/bg_timeline.png) center #f5ecd5;
    }
    /* ----------------------------------------
	cat
---------------------------------------- */
    #timeline .cat {
        padding: 0 5px 30px;
    }
    #timeline .cat li {
        float: left;
        width: 50%;
        padding: 0 5px 10px;
    }
    #timeline .cat a {
        display: block;
        background: #ffffff;
        border-radius: 2px;
        text-align: center;
        font-size: 1.5rem;
        color: #333333;
        line-height: 28px;
        text-decoration: none;
        transition-duration: 0.2s;
    }
    #timeline .cat a.active {
        background: #f15a24;
        color: #ffffff;
    }
    /* ----------------------------------------
	age
---------------------------------------- */
    #timeline .age h2 {
        padding: 0 0 40px 0;
        text-align: center;
        font-family: "Noto Serif JP";
        font-size: 5.4rem;
        color: #eb5e12;
        line-height: 1;
    }
    #timeline .age>p {
        padding: 0 20px 40px;
        text-align: center;
        font-weight: 500;
    }
    /* history
---------------------------------------- */
    #timeline .history {
        overflow: hidden;
        position: relative;
    }
    #timeline .history h3 {
        position: relative;
        padding: 0 0 20px 0;
        text-align: center;
        font-family: "Noto Serif JP";
        font-size: 3.6rem;
        color: #eb5e12;
        line-height: 1;
    }
    /* ---------- balloon ---------- */
    #timeline .history .balloon {
        position: relative;
        left: -400px;
        min-height: 96px;
        margin: 0 38px 20px 16px;
        padding: 12px 14px;
        background: #ffffff;
        border-radius: 8px;
        font-weight: 500;
        line-height: 20px;
        opacity: 0;
    }
    #timeline .history .balloon:nth-of-type(2n) {
        left: auto;
        right: -400px;
        margin: 0 16px 20px 38px;
    }
    #timeline .history h3+.official,
    #timeline .history h3+.official:nth-of-type(2n) {
        margin-top: 34px;
    }
    #timeline .history .balloon::before {
        content: "";
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        /* Android */
        -ms-transform: translateY(-50%);
        /* IE9 */
        transform: translateY(-50%);
        right: -32px;
        width: 32px;
        height: 40px;
        background: url(../../img/timeline/balloon_left.png) no-repeat;
        background-size: 32px auto;
    }
    #timeline .history .balloon:nth-of-type(2n)::before {
        left: -32px;
        background-image: url(../../img/timeline/balloon_right.png);
    }
    #timeline .history .balloon::after {
        content: "";
        display: block;
        clear: both;
    }
    #timeline .history .balloon img {
        float: left;
        margin: 0 10px 0 0;
    }
    #timeline .history .balloon:nth-of-type(2n) img {
        float: right;
        margin: 0 0 0 10px;
    }
    #timeline .history .balloon p {
        overflow: hidden;
    }
    /* ---------- official ---------- */
    #timeline .history .official {
        margin-top: 54px;
        background: #000064;
        color: #ffffff;
    }
    #timeline .history .official:nth-of-type(2n) {
        margin-top: 54px;
    }
    #timeline .history .official h4 {
        position: absolute;
        top: -34px;
        left: 0;
        height: 43px;
        padding: 0 0 0 18px;
        background: #000064;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        font-size: 1.5rem;
        line-height: 34px;
    }
    #timeline .history .official:nth-of-type(2n) h4 {
        left: auto;
        right: 0;
        padding: 0 14px 0 0;
    }
    #timeline .history .official h4::before {
        content: "";
        position: absolute;
        bottom: 8px;
        right: -18px;
        border-style: solid;
        border-width: 32px 0 0 18px;
        border-color: transparent transparent transparent #000064;
    }
    #timeline .history .official:nth-of-type(2n) h4::before {
        right: auto;
        left: -18px;
        border-width: 0 0 32px 18px;
        border-color: transparent transparent #000064 transparent;
    }
    #timeline .history .official h4 span {
        display: inline-block;
        padding: 0 8px 0 6px;
        border-bottom: 1px solid #f5ecd5;
    }
    #timeline .history .official:nth-of-type(2n) h4 span {
        padding: 0 6px 0 8px;
    }
    #timeline .history .official::before {
        background-image: url(../../img/timeline/balloon_left_official.png);
    }
    #timeline .history .official:nth-of-type(2n)::before {
        background-image: url(../../img/timeline/balloon_right_official.png);
    }
    /* ========================================================================
	卒業生インタビュー					[ /interview/ ]
======================================================================== */
    /* ----------------------------------------
	title
---------------------------------------- */
    #interview .title {
        overflow: hidden;
        position: relative;
        padding: 466px 20px 20px;
        background: #f5ecd5;
    }
    #interview .title h1 {
        position: absolute;
        top: 90px;
        left: 18px;
        z-index: 1;
    }
    #interview .title .image {
        position: absolute;
        top: 104px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        /* Android */
        transform: translateX(-50%);
    }
    #interview .title .image img {
        max-width: none;
    }
    #interview .title p.lead {
        padding: 0 0 20px 0;
        font-family: "Noto Serif JP";
        font-size: 2.4rem;
        line-height: 38px;
        letter-spacing: 0.05em;
    }
    /* ----------------------------------------
	interview
---------------------------------------- */
    #interview .interview {
        padding: 40px 0 20px 0;
    }
    #interview .interview li {
        min-width: 320px;
        max-width: 376px;
        margin: 0 auto 40px;
        padding: 0 16px;
    }
    #interview .interview dl {
        padding: 5px 5px 0;
        font-size: 1.4rem;
        line-height: 24px;
    }
    #interview .interview dl dt span {
        display: block;
        font-size: 2.4rem;
        line-height: 34px;
    }
    /* ----------------------------------------
	widget_timeline
---------------------------------------- */
    #interview .widget_timeline {
        padding-bottom: 40px;
    }
    /* ========================================================================
	100年の歴史　思い出投稿				[ /entry/ ]
======================================================================== */
    /* ----------------------------------------
	title
---------------------------------------- */
    #entry .title {
        overflow: hidden;
        position: relative;
        padding: 464px 20px 40px;
        background: #f5ecd5;
    }
    #entry .title h1 {
        position: absolute;
        top: 90px;
        right: 12px;
        z-index: 1;
    }
    #entry .title .image {
        position: absolute;
        top: 40px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        /* Android */
        transform: translateX(-50%);
    }
    #entry .title .image img {
        max-width: none;
    }
    #entry .title p span {
        display: block;
        font-size: 1.2rem;
        line-height: 21px;
    }
    /* ----------------------------------------
	entry
---------------------------------------- */
    #entry .entry {
        padding: 40px 20px;
    }
    #entry .entry dl dt {
        padding: 0 0 10px 0;
        font-size: 1.8rem;
        line-height: 28px;
    }
    #entry .entry dl dt span {
        font-size: 1.4rem;
    }
    #entry .entry dl dd {
        padding: 0 0 20px 0;
        font-size: 1.4rem;
        line-height: 24px;
    }
    #entry .entry dl dd a {
        display: inline-block;
        margin: 10px 0 0 0;
    }
    #entry .entry label {
        display: block;
        margin: 3px 0;
        font-size: 1.6rem;
        line-height: 26px;
    }
    #entry .entry textarea {
        height: 160px;
    }
    /* btn
---------------------------------------- */
    #entry .entry .btn {
        max-width: 340px;
        margin: 0 auto;
        padding: 10px 10px 0;
    }
    #entry .entry .btn button {
        display: block;
        width: 100%;
        background: #000064;
        border: none;
        text-align: center;
        font-family: "Noto Serif JP";
        font-size: 2.8rem;
        color: #ffffff;
        line-height: 56px;
        letter-spacing: 0.1em;
    }
    /* ========================================================================
	活動報告							[ /report/ ]
======================================================================== */
    /* ----------------------------------------
	title
---------------------------------------- */
    #report_detail .title {
        overflow: hidden;
        padding: 90px 30px 20px 0;
        background: url(../../img/common/bg_report_sp.png) no-repeat center 70px #f5ecd5;
        background-size: 375px auto;
    }
    #report_detail h1 {
        float: right;
        font-size: 4.4rem;
        line-height: 1;
        letter-spacing: 0.22em;
    }
    /* ----------------------------------------
	report
---------------------------------------- */
    #report_detail .report {
        padding: 20px 10px;
    }
    #report_detail .report img {
        display: block;
        margin: 0 auto;
    }
    #report_detail .report p {
        padding: 0 0 20px 0;
    }
    #report_detail .report p.center img {
        margin-bottom: 10px;
    }
}

@media screen and (max-width:374px) {
    header h1 {
        height: 506px;
        padding: 135px 0 0 0;
    }
    #home .anniversary {
        padding-top: 520px;
    }
    #home .anniversary .image img {
        width: auto;
        height: 520px;
    }
    #home .anniversary h2 {
        font-size: 5.6rem;
        line-height: 106px;
    }
    #home .report h2 {
        padding-right: 20px;
    }
    #home .sns h2 {
        padding-left: 10px;
    }
}