@charset "UTF-8";
/* CSS Document */
:root {
	--color-green: #3E8D9E;
	--color-lightgreen: #78AFBB;
	--color-palegreen: #E2EEF0;
	--color-yellow: #FFFF82;
    --color-point01: #3E8D9E;
	--color-point02: #3E8D9E;
	--color-point03: #3E8D9E;
	--color-point04: #3E8D9E;
	--color-point05: #3E8D9E;
	/*--color-point01: #FA6057;
	--color-point02: #F8A34D;
	--color-point03: #F8CE52;
	--color-point04: #61CF63;
	--color-point05: #488DF8;*/
    --color-red: #E50012;
}
/*▼ドローンコンテンツ modify ヘッダーでお役立ち情報の文字を目立たせるため。2025年3月7日*/
/*ul#GlobalNav > li:nth-of-type(2) > a {
    color: #3e8d9e !important;
    font-weight: 700;
}*/
ul#GlobalNav > li:nth-of-type(4) > a {
    color: #3e8d9e !important;
    font-weight: 700;
}
/*▲ドローンコンテンツ modify ヘッダーでお役立ち情報の文字を目立たせるため。2025年3月7日*/
.ContentsBlock {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
}
.BodyContents {
    width: 83.33vw;
    max-width: 1000px;
    margin: 0 auto;
}
#PageTitle {
    display: block;
    position: relative;
    padding-top: 35px;
    margin: 2rem auto 1rem;
}
#PageTitle::after {
    content: '';
    display: block;
    width: 5.833vw;
    max-width: 70px;
    height: 5.833vw;
    max-height: 70px;
    position: absolute;
    left: 1rem;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 50%;
}
#PageTitle h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1446/330;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 1rem;
    font-size: 200%;
    line-height: 150%;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), -2px 2px 10px rgba(0, 0, 0, 0.3), 2px -2px 10px rgba(0, 0, 0, 0.3), -2px -2px 10px rgba(0, 0, 0, 0.3);
}
#PageTitle h3{
    font-size: 120%;
    line-height: 150%;
    background-color: var(--color-green);
    color: var(--color-yellow);
    padding: 0.5em 1em;
    margin: 0;
    display: inline-flex;
}
.ContentsBlock h2 {
    margin: 1em 0 0;
    padding: 0;
    height: 20.83vw;
    max-height: 200px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-indent: -999em;
}
.ContentsBlock h3 {
    font-size: 120%;
    line-height: 150%;
    background-color: var(--color-green);
    color: var(--color-yellow);
    padding: 0.5em 1em;
    margin: 1em 0;
    border-radius: 2em;
}
.ContentsBlock h4{
    display: flex;
    width: 100%;
    background-color: var(--color-green);
    color: #ffffff;
    padding: 0.5em 1em;
}
.ContentsBlock h5{
    display: flex;
    width: 100%;
    background-color: var(--color-green);
    color: #ffffff;
    padding: 0.25em 1.5em;
    font-size: 100%;
    line-height: 150%;
    font-weight: 400;
    margin-bottom: 0.5em;
    border-radius: 1.5em;
}
#ContentsTitle{
    border-top: solid 1px #cccccc;
    border-bottom: solid 1px #cccccc;
}
/*▼add 2025/05/14 トップページへ戻るボタン追加。*/
#ContentsTitle h2 {
    background-image: url("../images/parts/h2_contents_title.png");
    display: flex; /* アイコンと文字を横並びに */
    align-items: start; /* 縦位置を中央に揃える */
}
.TopBtn img {
    display: block;
    margin-top: 30px;
    margin-left: 30px;
    height: auto;
    width:auto;
}
.IsSP {
    display: none;
}
/*▲add 2025/05/14 トップページへ戻るボタン追加。*/
#ContentsTitle .ContentsTitleBlock {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: wrap;
    width: 83.33vw;
    max-width: 1000px;
    margin: 0 auto 3em;
    position: relative;
    gap: 1em;
}
#ContentsTitle .ContentsTitleBlock a {
    color: #000000;
    font-weight: 700;
    text-decoration: none;
    width: calc((100% - 4em) / 5);
    position: relative;
    padding-top: 35px;
}
#ContentsTitle .ContentsTitleBlock a::after {
    content: '';
    display: block;
    width: 5.833vw;
    max-width: 70px;
    height: 5.833vw;
    max-height: 70px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 50%;
}
#ContentsTitle .ContentsTitleBlock a:nth-of-type(1)::after {
    background-image: url("../images/parts/contents_title_num01.png");
}
#ContentsTitle .ContentsTitleBlock a:nth-of-type(2)::after {
    background-image: url("../images/parts/contents_title_num02.png");
}
#ContentsTitle .ContentsTitleBlock a:nth-of-type(3)::after {
    background-image: url("../images/parts/contents_title_num03.png");
}
#ContentsTitle .ContentsTitleBlock a:nth-of-type(4)::after {
    background-image: url("../images/parts/contents_title_num04.png");
}
#ContentsTitle .ContentsTitleBlock a:nth-of-type(5)::after {
    background-image: url("../images/parts/contents_title_num05.png");
}
#ContentsTitle .ContentsTitleBlock figure {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: column;
}
#ContentsTitle .ContentsTitleBlock figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 257/290;
    object-fit: cover;
    border-radius: 1em;
    background-color: #ffffff;
}
#ContentsTitle .ContentsTitleBlock figure figcaption {
    text-align: center;
    padding-top: 0.5em;
}
.LeadText{
    font-size: 120%;
    line-height: 150%;
    padding: 1em;
}
.ContentsBlock p.Caution{
    font-size: 80%;
    line-height: 150%;
}
.ContentsBlock p.Caution span{
    display: inline-block;
    white-space: nowrap;
}
.BG_Green{
    background-color: var(--color-palegreen);
}
.BG_Gray {
    background-color: #F5F5F5;
}
.Redtext{
    color: var(--color-red);
}
.BtnCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2em auto;
}
.BtnCenter a.GreenArrow {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #000000;
    padding: 0.5em 3em 0.5em 2em;
    border-radius: 1.5em;
    color: #000000;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}
.BtnCenter a.GreenArrow::after {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("../images/parts/icn_triangle_r_wh.png") no-repeat center center #3E8D9E;
    background-size: contain;
    border-radius: 50%;
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
.BtnCenter a.WhMaskArrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em 3em 0.5em 2em;
    border-radius: 1.5em;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    background-color: var(--color-green);
}
.BtnCenter a.WhMaskArrow::after {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("../images/parts/icn_triangle_r_whmask.png") no-repeat center center;
    background-size: contain;
    border-radius: 50%;
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
.MaskTop, .MaskBtm {
    position: relative;
}
.MaskTop::before {
    content: '';
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200/60;
    background: url("../images/parts/wh_mask.png") no-repeat center bottom;
    background-size: 100% auto;
}
.MaskBtm::after {
    content: '';
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200/60;
    background: url("../images/parts/wh_mask.png") no-repeat center top;
    background-size: 100% auto;
}
.Marker {
	text-decoration: underline; /* 下線 */
	text-decoration-thickness: 0.5em; /* 線の太さ */
	text-decoration-color: #FFF362; /* 線の色 */
	text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
	text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}
/*タブレット*/
@media screen and (max-width:1199px) {
    #PageTitle {
        width: 98%;
        padding-top: calc(5.833vw/2);
    }
    #ContentsTitle .ContentsTitleBlock a {
        padding-top: 3vw;
    }
}
/*スマホ*/
@media screen and (max-width: 767px) {
    #PageTitle h1 {
        font-size: 150%;
        line-height: 150%;
    }
    #ContentsTitle .ContentsTitleBlock {
        width: 90vw;
        max-width: 90vw;
    }
    #ContentsTitle .ContentsTitleBlock figure figcaption {
        font-size: 80%;
        line-height: 150%;
    }
    /*▼add 2025/05/14 トップページへ戻るボタン追加。*/
    .BackToTopBtn {
        justify-content: center;
        align-items: center; /* 必要に応じて中央寄せ */
    }

    .IsNotSP {
        display: none;
    }

    .IsSP {
        display: flex;
        flex-direction: column; /* ← 縦に並べる */
        justify-content: center;
        align-items: center;
        text-decoration: none;
        position: relative;
        white-space: nowrap;
    }

    .ContentsTitleH2 {
        width: 50vw !important;
    }

    .BackToTopBtn img {
        /*width: 20em;*/
        height: 100%;
        width: auto;
        padding: 0.5em 3em 0.5em 2em;
    }
    /*▲add 2025/05/14 トップページへ戻るボタン追加。*/
        /**/
    @media screen and (max-aspect-ratio: 11/10) {
        /* 縦向きの場合のスタイル */
        .BodyContents {
            width: 90vw;
            max-width: 90vw;
        }
        #PageTitle{
            padding-top: 5vw;
        }
        #PageTitle::after {
            width: 10vw;
            max-width: 10vw;
            height: 10vw;
            max-height: 10vw;
        }
        #PageTitle h1 {
            aspect-ratio: 692/390;
        }
        .ContentsBlock h2 {
            height: 30vw;
            max-height: 30vw;
        }
        #ContentsTitle .ContentsTitleBlock a {
            color: #000000;
            font-weight: 700;
            text-decoration: none;
            width: calc((100% - 2em) / 3);
            position: relative;
            padding-top: 5vw;
        }
        #ContentsTitle .ContentsTitleBlock a:nth-of-type(4), #ContentsTitle .ContentsTitleBlock a:nth-of-type(5) {
            width: calc((100% - 1em) / 2);
        }
        #ContentsTitle .ContentsTitleBlock a figure img {
            aspect-ratio: 215/243;
        }
        #ContentsTitle .ContentsTitleBlock a:nth-of-type(4) figure img, #ContentsTitle .ContentsTitleBlock a:nth-of-type(5) figure img {
            aspect-ratio: 334/243;
        }
        #ContentsTitle .ContentsTitleBlock a::after {
            width: 10vw;
            max-width: 10vw;
            height: 10vw;
            max-height: 10vw;
        }
        .PortHide{
            display: none;
        }
    }
    @media screen and (min-aspect-ratio: 11/10) {
        /* 横向きの場合のスタイル */
    }
}