html {
    background-image: url(../images/d11.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Noto Sans JP", serif;
}

.pop {
    font-family: "Poppins", sans-serif;
}

.container {
    width: 90%;
    max: width 1120px;
    margin: 0 auto;
    position: relative;
}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.sep50 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}
.sep50flex {
    display: flex;
    flex-wrap: wrap;
    div {
        width: calc((100% - 50px) / 2);
        &:nth-child(odd) {
            margin-right: 50px;
        }
    }
}
.order-revers {
    div:nth-child(even) {
        order: 1;
        margin-right: 50px;
    }
    div:nth-child(odd) {
        order: 2;
        margin-right: 0;
    }
}
@media screen and (max-width:768px) {
    .sep50 {
        grid-template-columns: 1fr;
    }
    .sep50flex {
        display: block;
        div {
            width: 100%;
            margin-bottom: 50px;
            &:last-child {
                margin-bottom: 0:
            }
        }
    }
    .order-revers {
        div:nth-child(even) {
            margin-right: 0;
        }
        div:nth-child(odd) {
            margin-right: 0;
        }
    }
}

/* ヘッダー */
header {
    padding: 27px 0;
}
.logo {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.04em;
}
.logo span {
    color: blue;
}
.header_menu li {
    margin-left: 40px;
}
.header_menu li a {
    transition: .3s;
}
.header_menu li a:hover {
    color: rgb(101, 20, 119);
    transition: .3s;
}

@media screen and (max-width:768px) {
    header .container {
        justify-content: center;
    }
    .header_menu li {
        margin: 10px 0 0 0;
    }
}

/* メイン */

/* ページメニュー */
#page-menu {
    margin-top: 120px;
    font-size: 1.3rem;
    font-weight: bold;
    .menu_content {
        h2 {
            margin-bottom: 15px;
            font-weight: bold;
            color: blue;
        }
        ul {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            justify-content: center;
            align-items: center;
            @media screen and (max-width:768px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 10px;
            }
            li {
                text-align: center;
                a {
                    background: rgba(101, 20, 119, 1);
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    height: 80px;
                    padding: 15px;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    @media screen and (max-width:768px) {
                        height: unset;
                    line-height: 1.3;
                    }
                    &:hover {
                        background: rgb(101, 20, 119, 0.7);
                    }
                }
            }
        }
    }
}

/* ダウンロード、Youtube*/
#book {
    margin-top: 30px;
    margin-bottom: 120px;
    h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 60px;
    }
    .book-download {
        display: table;
        margin: 0 auto 50px auto;
        @media screen and (max-width:768px) {
            display: block;
        }
        div {
            vertical-align: middle;
        }
        div.book-download_btn {
            margin-right: 20px;
            display: inline-block;
            @media screen and (max-width:768px) {
                margin-bottom: 15px;
                margin-right: 0;
            }
            img {
                width: 450px;
                height: auto;
                @media screen and (max-width:768px) {
                    width: 100%;
                }
            }
        }
        div.book-download_img {
            display: inline-block;
            @media screen and (max-width:768px) {
                text-align: center;
            }
            img {
                width: 200px;
                height: auto;
                @media screen and (max-width:768px) {
                    width: 70%;
                }
            }
        }
    }
}
.youtube-link {
    text-align: center;
    li {
        margin-right: 25px;
        display: inline-block;
        @media screen and (max-width:768px) {
            margin-right: 0;
            margin-bottom: 10px;
            display: block;
        }
        &:last-child {
            margin-right: 0;
        }
        a {
            background: #7030a0;
            padding: 20px 100px;
            color: #fff;
            font-size: 1.3rem;
            font-weight: bold;
            display: block;
            @media screen and (max-width:768px) {
                padding: 20px 20px;
            }
        }
    }
}

/* コンセプト */
#concept {
    margin-top:120px;
    margin-bottom: 120px;
}
.title {
    font-size: 20px;
    font-weight: 500;
    color: rgb(101, 20, 119);
    margin-bottom: 40px;
}
#concept h3 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 60px;
}
.colum-2 {
    width: 48%;
}
.text {
    line-height: 2;
}
.concept_img {
    background-image: url(../images/d3.jpg);
    background-position: center;
    background-size: cover;
    height: 340px;
    border-radius: 20px;
}
.heading {
    font-family: "Dancing Script", cursive;
    font-size: 50px;
    font-weight: 700;
    color: rgb(207, 34, 184);
    opacity: 0.1;
    position: absolute;
    top:0;
    right: 0;
    z-index: -1;
}

/* News */
#news {
    margin-bottom: 120px;
}
.soon-image {
    div {
        &.newsImg {
            img {
                display: block;
                width: 100%;
                height: auto;
                margin: 0 auto;
            }
        }
    }
}

/* １００周年記念式典当日 */
#events {
    .txtCenter {
        text-align: center;
    }
    p  {
        margin-bottom: 25px;
    }
    .event-list {
        img {
            @media screen and (max-width:768px) {
                width: 100%;
            }
        }
    }
    h3 {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 30px;
    }
    .events_content {
        margin-bottom: 50px;
        .events_content-img {
            img {
                border-radius: 20px;
                width: 100%;
                height: auto;
                vertical-align: bottom;
            }
        }
        .events_content-text {
            display: flex;
            align-items: center;
        }
    }
    video {
        width: 100%;
    }
}

/* 卒業生ライター下田が聞く */
#writer {
    .writer-big-prof {
        margin-bottom: 50px;
        position: relative;
        .big-prof-bg {
        }
        .big-prof-icon {
            position: absolute;
        }
        .big-prof-icon-note, .big-prof-icon-x {
            bottom: 60px;
            @media screen and (max-width:768px) {
                width: calc(100% - 30px * 2);
                left: 30px;
                text-align: center;
            }
            a {
                img {
                    @media screen and (max-width:768px) {
                        width: auto;
                        height: 40px;
                    }
                }
            }
        }
        .big-prof-icon-note {
            right: calc(290px + 55px);
            @media screen and (max-width:768px) {
                bottom: 100px;
                right: unset;
            }
        }
        .big-prof-icon-x {
            right: 55px;
            @media screen and (max-width:768px) {
                bottom: 55px;
                right: unset;
            }
        }
    }
    .writer-headline {
        margin-bottom: 30px;
        display: grid;
        grid-template-columns: calc(100% - 480px) 480px;
        @media screen and (max-width:768px) {
            display: block;
        }
        div:nth-child(1) {
            h2 {
                margin-bottom: 10px;
                font-size: 120px;
                color: #000;
                line-height: 1;
                @media screen and (max-width:768px) {
                    font-size: 50px;
                }
            }
            h3 {
                font-size: 40px;
                font-weight: 700;
                margin-bottom: 30px;
                @media screen and (max-width:768px) {
                    font-size: 20px;
                }
            }
        }
        div:nth-child(2) {
            .writer-headline_profile-photo {
                margin-bottom: 30px;
            }
            .writer-headline_profile-name {
                text-align: center;
                span {
                    font-size: 30px;
                    display: block;
                    @media screen and (max-width:768px) {
                        font-size: 25px;
                    }
                }
                div {
                    font-size: 50px;
                    @media screen and (max-width:768px) {
                        font-size: 35px;
                    }
                }
            }
        }
    }
    .writer-info {
        h3 {
            font-size: 30px;
            font-weight: 700;
            margin-bottom: 30px;
            @media screen and (max-width:768px) {
                font-size: 20px;
            }
        }
        .writer-info_text {
            margin-bottom: 40px;
            font-size: 18px;
        }
    }
    p  {
        margin-bottom: 25px;
    }
    .writer_sns {
        margin-bottom: 50px;
        vertical-align: baseline;
        li:nth-child(1) {
            font-size: 18px;
            font-weight: bold;
            vertical-align: text-bottom;
        }
        li {
            margin-bottom: 15px;
            display: inline-block;
            margin-right: 20px;
            @media screen and (max-width:768px) {
                display: block;
                margin-right: 0;
            }
            a {
                display: flex;
                align-items: center;
                .writer_sns-icon {
                    margin-right: 15px;
                    img {
                        width: 50px;
                        height: auto;
                    }
                }
                .writer_sns-link {
                }
                &:hover {
                    .writer_sns-link {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

/* INTERVIE #num */
#interview {
    .interview-headline {
        margin-bottom: 50px;
        h2 {
            margin-bottom: 10px;
            font-size: 90px;
            color: #000;
            line-height: 1;
            @media screen and (max-width:768px) {
                font-size: 45px;
            }
        }
        h3 {
            font-size: 30px;
            font-weight: 700;
            margin-bottom: 30px;
            @media screen and (max-width:768px) {
                font-size: 20px;
            }
        }
    }
    .txtCenter {
        text-align: center;
    }
    p  {
        margin-bottom: 25px;
    }
    h3 {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 30px;
        @media screen and (max-width:768px) {
            font-size: 20px;
        }
    }
    .interview_content {
        margin-bottom: 50px;
        img {
            @media screen and (max-width:768px) {
                width: 100%;
                height: auto;
            }
        }
    }
    .comment{
        display:flex;
        --comment-name-width:5em;
        .comment-name{
            width:var(--comment-name-width)
        }
        > p, > div{width:calc(100% - var(--comment-name-width));}
    }
}

/* アニバーサリーイベント */
#anivEvents {
    margin-bottom: 120px;
}
@media screen and (max-width:768px) {
    #anivEvents {
        margin-bottom: 60px;
    }
}

/* ヒストリー */
#History {
    margin-bottom: 120px;
}
.History_inner {
    margin-bottom: 40px;
    position: relative;
}
.column-40 {
    width: 40%;
}
.column-55 {
    width: 55%;
}
#History img {
    border-radius: 20px;
    margin-bottom: 30px;
}
#History h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* ドネーションプロジェクト */
.container2 {
    width: 100%;
}
.container2 h2 {
    margin-left: 5%;
}
#Donationproject {
    margin-bottom: 120px;
    background-color: #d2e;
    margin-left: 10%;
}

/* ４連続写真 */
.column-35 h3 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 20px;
    padding: 20px;
}
.column-35 p {
    margin-top: 20px;
    font-weight: 500;
}

/* マネジメントオルガニゼイション */
#managementorganization {
    margin-bottom: 120px;
    margin-top: 120px;
}
#managementorganization dl {
    max-width: 900px;
    margin-left: auto;
}
#managementorganization dt {
    width: 30%;
    padding: 48px 0;
    font-weight: 500;
    border-bottom: solid 1px #d2e;
}
#managementorganization dd {
    width: 70%;
    padding: 48px 0;
    border-bottom: solid 1px #d2e;
}

/* ボトム */
.column-a {
    background-image: url(../images/d12.png);
    background-position: center;
    background-size: cover;
    width:24%;
    height: 270px;
    border-radius: 20px;
}
.column-b {
    background-image: url(../images/d13.png);
    background-position: center;
    background-size: cover;
    width:18%;
    height: 270px;
    border-radius: 20px;
}
.column-c {
    background-image: url(../images/d16.png);
    background-position: center;
    background-size: cover;
    width:24%;
    height: 270px;
    border-radius: 20px;
}
.column-d {
    background-image: url(../images/d19.jpg);
    background-position: center;
    background-size: cover;
    width:28%;
    height: 270px;
    border-radius: 20px;
}

/* フッター */
footer {
    text-align: center;
    margin: 90px 0;
}
.copyright {
    font-size: 12px;
    margin-top: 40px;
}

/* YouTube */
.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 20px;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* parts */

/* flexBox1, gridBox1 左右50% */
/* flexBox2, gridBox2 左260px */
/* flexBox3, gridBox3 右260px */
/* flexBox4, gridBox4 均等3つ並び */
/* flexBox5, gridBox5 左355px */
/* flexBox6, gridBox6 右355px */
.flexBox1,
.flexBox2,
.flexBox3,
.flexBox4,
.flexBox5,
.flexBox6 {
    display: flex;
    margin-bottom: 25px;
    img {
        width: 100%;
        height: auto;
    }
}
.flexBox1 > div:nth-of-type(1),
.flexBox2 > div:nth-of-type(1),
.flexBox3 > div:nth-of-type(1),
.flexBox5 > div:nth-of-type(1),
.flexBox6 > div:nth-of-type(1) {
    margin-right: 25px;
}
.flexBox1 > div { width: calc((100% - 25px) / 2); }
.flexBox2 > div:nth-of-type(1),
.flexBox3 > div:nth-of-type(2) {
    width: 260px;
}
.flexBox5 > div:nth-of-type(1),
.flexBox6 > div:nth-of-type(2) {
    width: 355px;
}
.flexBox2 > div:nth-of-type(2),
.flexBox3 > div:nth-of-type(1) {
    width: calc(100% - 285px);
}
.flexBox5 > div:nth-of-type(2),
.flexBox6 > div:nth-of-type(1) {
    width: calc(100% - 380px);
}
.flexBox4 > div {
    width: calc((100% - 50px) / 3);
    margin-right: 24.9px;
}
.flexBox4 > div:nth-of-type(3) { margin-right: 0; }
@media only screen and (max-width:999px) {
    .flexBox1,
    .flexBox2,
    .flexBox3,
    .flexBox4,
	.flexBox5,
	.flexBox6 {
        display: block;
    }
    .flexBox1 > div:nth-of-type(1),
    .flexBox2 > div:nth-of-type(1),
    .flexBox3 > div:nth-of-type(1),
    .flexBox4 > div,
	.flexBox5 > div:nth-of-type(1),
	.flexBox6 > div:nth-of-type(1) {
        width: 100%;
        margin: 0 0 15px 0;
    }
    .flexBox1 > div:nth-of-type(2),
    .flexBox2 > div:nth-of-type(2),
    .flexBox3 > div:nth-of-type(2),
    .flexBox4 > div:nth-of-type(3),
	.flexBox5 > div:nth-of-type(2),
    .flexBox6 > div:nth-of-type(2) {
        width: 100%;
        margin-bottom: 0;
    }
}

/* ボタン用 */
.buttonLink1, .buttonLink2 {
	overflow: hidden;
	margin: 0 auto 25px;
	padding: 0;
	border-radius:6px;
	text-align:center;
	font-size: 1.2rem;
}
.buttonLink1 a, .buttonLink2 a {
	display: block;
	position: relative;
	color: #fff;
	text-decoration: none;
	padding: 15px 30px 16px 5px;
}
.buttonLink1 a { background: rgba(168,130,179,1); }
.buttonLink2 a { background: #ff9900; }
.buttonLink1 a:hover { background: #c19dcc; }
.buttonLink2 a:hover { background: #ffcc00; }
.buttonLink1 a::before, .buttonLink2 a::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f138";
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -11px;
	color: #fff;
}

/*もっとみる*/
.linkMore1 {
	text-align: center;
    margin-bottom: 25px;
}
.linkMore1 a {
	display: inline-block;
	border: 1px solid #ccc;
	padding: 10px 50px 10px 25px;
	position: relative;
	text-decoration: none;
	border-radius: 10px;
    background: rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}
.linkMore1 a:hover { background: rgba(255,255,255,0.8); }
.linkMore1 a::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f101";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

/* list ----------------------------------------------*/
.tagBox ul.ul1, .tagBox ol.ol1,
ol.bracket1, ol.bracket2,
ol.alphabet1, ol.alphabet2,
ol.circle_number,
.tagBox ul.float2col1,
.tagBox ul.float3col1, .tagBox ul.float3col2,
.tagBox ul.float4col1, .tagBox ul.float4col2,
.tagBox ul.float5col1, .tagBox ul.float5col2,
.tagBox ul.float6col2,
ul.ul1, ol.ol1, 
ul.float2col1,
ul.float3col1, ul.float3col2,
ul.float4col1, ul.float4col2,
ul.float5col1, ul.float5col2,
ul.float6col2 {
	margin-bottom: 25px;
    overflow: hidden;
}

/*デフォルト*/
.tagBox ul, .tagBox ol {
	margin-bottom: 25px;
	overflow: hidden;
}
.tagBox ul li,
ul.ul1 li {
	list-style-type: disc;
	margin: 0 0 10px 20px;
}
.tagBox ol li,
ol.ol1 li {
	list-style-type: decimal;
	margin: 0 0 10px 30px;
}
.tagBox ul li ul, .tagBox ol li ul {
	margin-bottom: 0;
}
.tagBox ul li ul li, .tagBox ol li ul li,
ul.ul1 li ul li, ol.ol1 li ul li {
	list-style-type: circle;
}

/* 装飾ありリスト */

/* bracket1 （1） */
/* bracket2 1） */
ol.bracket1 li, ol.bracket2 li {
    list-style-type: none;
	margin: 0 0 10px 0;
    counter-increment: cnt;
    position: relative;
}
ol.bracket1 li {
    padding-left: 30px;
}
ol.bracket2 li {
    padding-left: 25px;
}
ol.bracket1 li::before, ol.bracket2 li::before {
    position: absolute;
    left: 0;
}
ol.bracket1 li::before {
	content: "(" counter(cnt) ") ";
}
ol.bracket2 li::before {
	content: counter(cnt) ") ";
}

/* alphabet1 a. */
/* alphabet2 A. */
ol.alphabet1 li {
    list-style-type: lower-alpha;
}
ol.alphabet2 li {
    list-style-type: upper-alpha;
}

/* ①～⑨ */
ol.circle_number {
    li {
        list-style: none;
        margin: 0 0 10px 0;
        padding-left: 25px;
        position: relative;
        &::before {
            top: 0;
            left: 0;
            margin-right: 5px;
            position: absolute;
        }
        &:nth-child(1)::before { content: "\2460"; }
        &:nth-child(2)::before { content: "\2461"; }
        &:nth-child(3)::before { content: "\2462"; }
        &:nth-child(4)::before { content: "\2463"; }
        &:nth-child(5)::before { content: "\2464"; }
        &:nth-child(6)::before { content: "\2465"; }
        &:nth-child(7)::before { content: "\2466"; }
        &:nth-child(8)::before { content: "\2467"; }
        &:nth-child(9)::before { content: "\2468"; }
        &:nth-child(10)::before { content: "\02469"; }
        &:nth-child(11)::before { content: "\0246A"; }
        &:nth-child(12)::before { content: "\0246B"; }
        &:nth-child(13)::before { content: "\0246C"; }
        &:nth-child(14)::before { content: "\0246D"; }
        &:nth-child(15)::before { content: "\0246E"; }
        &:nth-child(16)::before { content: "\0246F"; }
        &:nth-child(17)::before { content: "\02470"; }
        &:nth-child(18)::before { content: "\02471"; }
        &:nth-child(19)::before { content: "\02472"; }
        &:nth-child(20)::before { content: "\02473"; }
    }
}

/*リストの飾り不要時*/
.tagBox ul.listNonStyle li,
.tagBox ol.listNonStyle li {
    list-style-type: none;
	margin: 0 0 10px 0;
}

/* 2つ並びのリスト 999px以下で1列に */
.tagBox ul.float2col1 > li,
ul.float2col1 > li{
    list-style-type: none;
	width: calc((100% - 25px) / 2);
	float: left;
    margin: 0 24.9px 15px 0;
}
.tagBox ul.float2col1 > li:nth-child(odd), ul.float2col1 > li:nth-child(odd) { clear: left; }
.tagBox ul.float2col1 > li:nth-child(even), ul.float2col1 > li:nth-child(even) { margin-right: 0; }
@media only screen and (max-width:999px) {
    .tagBox ul.float2col1 > li,
    ul.float2col1 > li{
        width: 100%;
        float: none;
        margin: 0 0 15px 0;
    }
}

/* 3つ並びのリスト 999px以下で1列に */
.tagBox ul.float3col1 > li,
ul.float3col1 > li {
    list-style-type: none;
	width: calc((100% - 50px) / 3);
	float: left;
	margin: 0 24.9px 15px 0;
}
.tagBox ul.float3col1 > li:nth-child(3n), ul.float3col1 > li:nth-child(3n) { margin-right: 0; }
.tagBox ul.float3col1 > li:nth-child(3n+1), ul.float3col1 > li:nth-child(3n+1) { clear: left; }
@media only screen and (max-width:999px) {
	.tagBox ul.float3col1 > li,
    ul.float3col1 > li{
        width: 100%;
        float: none;
        margin: 0 0 15px 0;
	}
}

/* 3つ並びのリスト 999px以下で1列に Flex版 */
.tagBox ul.float3col2,
ul.float3col2 {
    display: flex;
    flex-wrap: wrap;
}
.tagBox ul.float3col2 > li,
ul.float3col2 > li {
    list-style-type: none;
	width: calc((100% - 50px) / 3);
	margin: 0 24.9px 15px 0;
}
.tagBox ul.float3col2 > li:nth-child(3n), ul.float3col2 > li:nth-child(3n) { margin-right: 0; }

@media only screen and (max-width:999px) {
    ul.float3col2 > li,
    .tagBox ul.float3col2 > li {
       width: calc((100% - 15px) / 2);
        float: none;
        margin: 0 0 15px 0;
    }
    ul.float3col2 li:nth-child(3n), .tagBox ul.float3col2 li:nth-child(3n) { margin:0 0 15px 0; }
    
	ul.float3col2 li:nth-child(2n), .tagBox ul.float3col2 li:nth-child(2n) { float: right; margin-left: 15px; }
	ul.float3col2 li:nth-child(2n+1), .tagBox ul.float3col2 li:nth-child(2n+1) { float: left; clear: right; }
}

/* 4つ並びのリスト 999px以下で1列に */
ul.float4col1 > li,
.tagBox > ul.float4col1 li {
    list-style-type: none;
	width: calc((100% - 75px) / 4);
	float: left;
	margin: 0 24.9px 15px 0;
}
ul.float4col1 > li:nth-child(4n), .tagBox ul.float4col1 > li:nth-child(4n) {margin: 0 0 15px 0;}
ul.float4col1 > li:nth-child(4n+1), .tagBox ul.float4col1 > li:nth-child(4n+1) {clear: left;}
@media only screen and (max-width:999px) {
    ul.float4col1 > li,
    .tagBox ul.float4col1 > li{
        width: 100%;
        float: none;
        margin: 0 0 15px 0;
    }
}

/* 4つ並びのリスト 999px以下で2列に */
ul.float4col2 > li,
.tagBox ul.float4col2 > li{
    list-style-type: none;
	width: calc((100% - 75px) / 4);
	float: left;
	margin: 0 24.9px 15px 0;
}
ul.float4col2 > li:nth-child(4n), .tagBox ul.float4col2 > li:nth-child(4n) {margin: 0 0 15px 0;}
ul.float4col2 > li:nth-child(4n+1), .tagBox ul.float4col2 > li:nth-child(4n+1) {clear: left;}
@media only screen and (max-width:999px) {
    ul.float4col2 > li,
    .tagBox ul.float4col2 > li{
       width: calc((100% - 15px) / 2);
        float: none;
        margin: 0 0 15px 0;
    }
    ul.float4col2 > li:nth-child(4n), .tagBox ul.float4col2 > li:nth-child(4n) {margin:0 0 15px 0;}
    ul.float4col2 > li:nth-child(4n+1), .tagBox ul.float4col2 > li:nth-child(4n+1) {float: none;}
    
	ul.float4col2 > li:nth-child(2n), .tagBox ul.float4col2 > li:nth-child(2n) {float: right;}
	ul.float4col2 > li:nth-child(2n+1), .tagBox ul.float4col2 > li:nth-child(2n+1) {float: left; clear: right;}
}

/* 5つ並びのリスト 999px以下で1列に */
ul.float5col1 > li,
.tagBox ul.float5col1 > li {
    list-style-type: none;
	width: calc((100% - 100px) / 5);
	float: left;
	margin: 0 24.9px 15px 0;
}
ul.float5col1 > li:nth-child(5n), .tagBox ul.float5col1 > li:nth-child(5n) { margin: 0 0 15px 0; }
ul.float5col1 > li:nth-child(5n+1), .tagBox ul.float5col1 > li:nth-child(5n+1) { clear: left; }
@media only screen and (max-width:999px) {
    ul.float5col1 > li,
    .tagBox ul.float5col1 > li{
        width: 100%;
        float: none;
        margin: 0 0 15px 0;
    }
}

/* 5つ並びのリスト 999px以下で2列に */
ul.float5col2 > li,
.tagBox ul.float5col2 > li {
    list-style-type: none;
	width: calc((100% - 100px) / 5);
	float: left;
	margin: 0 24.9px 15px 0;
}
ul.float5col2 > li:nth-child(5n), .tagBox ul.float5col2 > li:nth-child(5n) { margin: 0 0 15px 0; }
ul.float5col2 > li:nth-child(5n+1), .tagBox ul.float5col2 > li:nth-child(5n+1) { clear: left; }
@media only screen and (max-width:999px) {
    ul.float5col2 > li,
    .tagBox ul.float5col2 > li {
       width: calc((100% - 15px) / 2);
        float: none;
        margin: 0 0 15px 0;
    }
    ul.float5col2 > li:nth-child(5n), .tagBox ul.float5col2 > li:nth-child(5n) { margin:0 0 15px 0; }
    ul.float5col2 > li:nth-child(5n+1), .tagBox ul.float5col2 > li:nth-child(5n+1) { float: none; clear: unset; }
    
	ul.float5col2 > li:nth-child(2n), .tagBox ul.float5col2 > li:nth-child(2n) { float: right; }
	ul.float5col2 > li:nth-child(2n+1), .tagBox ul.float5col2 > li:nth-child(2n+1) { float: left; clear: right; }
}

/* 6つ並びのリスト 999px以下で2列に */
ul.float6col2 > li,
.tagBox ul.float6col2 > li{
    list-style-type: none;
	width: calc((100% - 100px) / 6);
	float: left;
	margin: 0 20px 15px 0;
}
ul.float6col2 > li:nth-child(6n), .tagBox ul.float6col2 > li:nth-child(6n) {margin: 0 0 15px 0;}
ul.float6col2 > li:nth-child(6n+1), .tagBox ul.float6col2 > li:nth-child(6n+1) {clear: left;}
@media only screen and (max-width:999px) {
    ul.float6col2 > li,
    .tagBox ul.float6col2 > li{
       width: calc((100% - 15px) / 2);
        float: none;
        margin: 0 0 15px 0;
    }
    ul.float6col2 > li:nth-child(6n), .tagBox ul.float6col2 > li:nth-child(2n) {margin:0 0 15px 0;}
    ul.float6col2 > li:nth-child(6n+1), .tagBox ul.float6col2 > li:nth-child(2n+1) {float: none;}
    
	ul.float6col2 > li:nth-child(2n), .tagBox ul.float6col2 > li:nth-child(2n) {float: right;}
	ul.float6col2 > li:nth-child(2n+1), .tagBox ul.float6col2 > li:nth-child(2n+1) {float: left; clear: right;}
}

/* 横並びリストの画像はPCでも自動で幅最大100%に設定 */
.tagBox ul.float2col1 img,
.tagBox ul.float3col1 img, .tagBox ul.float3col2 img,
.tagBox ul.float4col1 img, .tagBox ul.float4col2 img,
.tagBox ul.float5col1 img, .tagBox ul.float5col2 img,
.tagBox ul.float6col2 img,
ul.float2col1 img,
ul.float3col1 img, ul.float3col2 img,
ul.float4col1 img, ul.float4col2 img,
ul.float5col1 img, ul.float5col2 img,
ul.float6col2 img {
	max-width: 100%;
	height: auto;
}

/*横に並ぶ背景色付きのリスト*/
.tagBox ul.boxList1,
.tagBox ul.boxList2 {
    display: flex;
    flex-wrap: wrap;
}
.tagBox ul.boxList1 li,
.tagBox ul.boxList2 li{
    list-style: none;
    margin: 0 10px 10px 0;  
    display: flex;
    align-items: center;
    background: #f5f5f5;
    padding: 15px 5px;
    border-radius: 5px;
    text-align: center;
    justify-content: center;
}
.tagBox ul.boxList1 li{width: calc((100% - 30px) / 4);}
.tagBox ul.boxList2 li{width: calc((100% - 30px) / 3);}
.tagBox ul.boxList1 li:nth-of-type(4n),
.tagBox ul.boxList2 li:nth-of-type(3n){margin-right: 0;}
@media only screen and (max-width:999px) {
    .tagBox ul.boxList1,
    .tagBox ul.boxList2 {
        display: block;
    }
    .tagBox ul.boxList1 li,
    .tagBox ul.boxList2 li{
        display: block;
        width: 100%;
        margin: 0 0 5px 0;
        padding: 10px 5px;
        background: none;
        border-bottom: 1px dotted #ccc;
    }
}

/* ------------------------------------------------------- */
/* Move Top ---------------------------------------------- */
/* ------------------------------------------------------- */
/* ページ上部に戻る スクロールで自動表示 */
#pageTop {
    width: 45px;
    height: 45px;
    display: none;
    position: fixed;
	right: 15px;
	bottom: 15px;
    z-index: 5;
}
#pageTop div {
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 50%;
}
#pageTop div span { display: none; }
#pageTop div:hover { background: rgba(0,0,0,0.5); }
#movePageTop {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
}
#movePageTop::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f062";
    color: #fff;
    font-size: 2.0rem;
}
@media only screen and (max-width:999px) {
    #pageTop {
		right: 10px;
		bottom:10px;
    }
}