@charset "utf-8";
/*ABOUT*/
.contentsBox{
	width: 700px;
	margin: 0 auto;
}
.aboutBox{
	font-size: 1.9rem;
}
.aboutBox2{
	font-size: 2.4rem;
	font-weight: 700;
}
.aboutBoxTop{
	font-size: 6.5rem;
	font-weight: 700;
    margin-bottom:50px;
    line-height:1.5;
}
.aboutBoxTop .aboutBoxTopSub{
    font-size: 0.45em;
    display:block;
    line-height:2.5;
}
.aboutThemeBox{
    margin-bottom:40px;
    font-size:1.9rem;
    line-height:1.4;
}
.aboutThemeBox > div{
    display:flex;
    align-items: center;
    padding:10px 0;
    margin-bottom:5px;  
}
.aboutThemeBox > div > div:nth-child(1){
    width:210px;
    margin-right:30px;
    
}
.aboutThemeBox > div > div:nth-child(2){
    width:calc(100% - 240px);
}

@media only screen and (max-width:999px){
	.contentsBox{width: 100%;}
	.aboutBox{font-size: 1.8rem;}
	.aboutBox2{font-size: 2.0rem;}
    .aboutBoxTop{
        font-size: 4.5rem;
    }
    .aboutBoxTop .aboutBoxTopSub{
        font-size: 0.4em;
        line-height:3;
    }
    .aboutThemeBox{
        margin-bottom:40px;
        font-size:2.0rem;
    }
    .aboutThemeBox > div{
        flex-direction: column;
        padding:15px;
        margin-bottom:15px;
        border:3px solid #eee;
        border-radius: 8px;
    }
    .aboutThemeBox > div > div:nth-child(1){
        width:100%;
        text-align:center;
        margin-right:0px;
        margin-bottom:10px;
    }
    .aboutThemeBox > div > div:nth-child(2){
        width:100%;
    }
}
/*EVENT*/
.newsList1Title a:nth-child(2){
	margin-left: 20px;
}

/*FRIENDS*/
.friends .linkBtnMenu{
    display: flex;
    flex-wrap: wrap;
	margin-bottom: 60px;
}
.friends .linkBtnMenu > div{
	width: calc((100% - 75px)/4);
	list-style: none;
	margin: 0 24.9px 25px 0px;
}
.friends .linkBtnMenu > div:nth-child(4n){
	margin: 0 0px 25px 0px;
}
.friends .linkBtnMenu > div a{
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	border:2px solid #000;
	color: #000;
	padding: 10px 0;
	position: relative;
	font-weight: 700;
}
.friends .linkBtnMenu > div a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f078";
	font-weight: 900;
	position: absolute;
	left: 10px;
	top: 10px;
	transition: 0.3s;
}
.friends .linkBtnMenu > div a:hover::before{
	top: 15px;
	transition: 0.3s;
}
@media only screen and (max-width:999px){
    .friends .linkBtnMenu{
        margin-bottom: 30px;
        flex-direction: column;
    }
    .friends .linkBtnMenu > div{
        width:100%;
        margin: 0 0px 15px 0px;
    }
}

.linkBtn6{
	display: flex;
	justify-content: space-between;
	margin-bottom: 60px;
}
.linkBtn6 > div{
	width: calc((100% - 60px)/6);
	list-style: none;
	margin: 0;
}
.linkBtn6 > div a{
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	border:2px solid #000;
	color: #000;
	padding: 10px 0;
	position: relative;
	font-weight: 700;
}
.linkBtn6 > div a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f078";
	font-weight: 900;
	position: absolute;
	left: 10px;
	top: 10px;
	transition: 0.3s;
}
.linkBtn6>div a:hover::before{
	top: 15px;
	transition: 0.3s;
}
.tagBox .friendsList,
.tagBox .friendsList2,
.tagBox .friendsList3,
.tagBox .friendsList4,
.tagBox .friendsList5{
    width: 100%;
	margin-bottom: 60px;
    border-top: 1px solid #ccc;
}
.tagBox .friendsList ul,
.tagBox .friendsList3 ul,
.tagBox .friendsList4 ul,
.tagBox .friendsList5 ul{
    display:flex;
    flex-wrap:wrap;
}
.tagBox .friendsList ul > li,
.tagBox .friendsList2 ul > li,
.tagBox .friendsList3 ul > li,
.tagBox .friendsList4 ul > li,
.tagBox .friendsList5 ul > li{
    background: #f5f5f5;
    list-style-type:none;
    margin:0;
}
.tagBox .friendsList ul > li:nth-child(4n),
.tagBox .friendsList ul > li:nth-child(4n-1),
.tagBox .friendsList2 ul > li:nth-child(2n),
.tagBox .friendsList3 ul > li:nth-child(4n),
.tagBox .friendsList3 ul > li:nth-child(4n-1),
.tagBox .friendsList4 ul > li:nth-child(4n),
.tagBox .friendsList4 ul > li:nth-child(4n-1),
.tagBox .friendsList5 ul > li:nth-child(4n+2),
.tagBox .friendsList5 ul > li:nth-child(4n+3){
    background: #ffffff;
}
.tagBox .friendsList ul > li,
.tagBox .friendsList2 ul > li,
.tagBox .friendsList3 ul > li,
.tagBox .friendsList4 ul > li,
.tagBox .friendsList5 ul > li{
    display:flex;
    border-bottom: 1px solid #ccc;
}
.tagBox .friendsList ul > li,
.tagBox .friendsList3 ul > li,
.tagBox .friendsList4 ul > li,
.tagBox .friendsList5 ul > li{
    width:50%;
}
.tagBox .friendsList.col1 ul > li{
     width:100%;
}
.tagBox .friendsList ul > li,
.tagBox .friendsList3 ul > li,
.tagBox .friendsList5 ul > li{
    justify-content: center;
}
.tagBox .friendsList3 ul > li,
.tagBox .friendsList5 ul > li{
    align-items: center;
}
.tagBox .friendsList ul > li,
.tagBox .friendsList2 ul > li > div,
.tagBox .friendsList3 ul > li,
.tagBox .friendsList4 ul > li,
.tagBox .friendsList5 ul > li{
    padding:10px;
}
.tagBox .friendsList ul > li > div,
.tagBox .friendsList3 ul > li,
.tagBox .friendsList5 ul > li{
    text-align: center;
}
.tagBox .friendsList2 ul > li > div:nth-child(1){
    width:250px;
    font-size:1.8rem;
    text-align: center;
}
.tagBox .friendsList2 ul > li > div:nth-child(2){
    width:130px;
}
.tagBox .friendsList span{
    font-weight:700;
    font-size:2.0rem;
}
.tagBox .friendsList4 ul > li > div{
    display:flex;
    align-items: center
}
.tagBox .friendsList4 ul > li > div > img{
    margin-right:10px;
    width:150px;
    display:block;
}

@media only screen and (max-width:999px){
    .tagBox .friendsList ul,
    .tagBox .friendsList3 ul,
    .tagBox .friendsList4 ul,
    .tagBox .friendsList5 ul{
        flex-direction: column;
    }
    .tagBox .friendsList ul > li:nth-child(4n),
    .tagBox .friendsList ul > li:nth-child(4n-1),
    .tagBox .friendsList3 ul > li:nth-child(4n),
    .tagBox .friendsList3 ul > li:nth-child(4n-1),
    .tagBox .friendsList4 ul > li:nth-child(4n),
    .tagBox .friendsList4 ul > li:nth-child(4n-1),
    .tagBox .friendsList5 ul > li:nth-child(4n+2),
    .tagBox .friendsList5 ul > li:nth-child(4n+3){
        background: #f5f5f5;
    }
    .tagBox .friendsList ul > li:nth-child(2n),
    .tagBox .friendsList3 ul > li:nth-child(2n),
    .tagBox .friendsList4 ul > li:nth-child(2n),
    .tagBox .friendsList5 ul > li:nth-child(2n){
        background: #ffffff;
    }
    .tagBox .friendsList ul > li,
    .tagBox .friendsList2 ul > li,
    .tagBox .friendsList3 ul > li,
    .tagBox .friendsList4 ul > li,
    .tagBox .friendsList5 ul > li{
        flex-direction: column;
    }
    .tagBox .friendsList ul > li,
    .tagBox .friendsList3 ul > li,
    .tagBox .friendsList4 ul > li,
    .tagBox .friendsList5 ul > li{
        width:100%;
    }
    .tagBox .friendsList ul > li,
    .tagBox .friendsList3 ul > li,
    .tagBox .friendsList5 ul > li{
        justify-content:flex-start;
        align-items: center;
    }
    .tagBox .friendsList ul > li > div,
    .tagBox .friendsList3 ul > li,
    .tagBox .friendsList5 ul > li{
        text-align: center;
    }
    .tagBox .friendsList2 ul > li{
        padding:10px;
    }
    .tagBox .friendsList2 ul > li > div{
        padding:0;
    }
    .tagBox .friendsList2 ul > li > div:nth-child(1),
    .tagBox .friendsList2 ul > li > div:nth-child(2),
    .tagBox .friendsList2 ul > li > div:nth-child(3){
        width:100%;
        text-align: center;
    }
    .tagBox .friendsList4 ul > li > div{
        flex-direction: column;
        align-items:center;
    }
    .tagBox .friendsList4 ul > li > div > img{
        margin-right:0px;
        margin-bottom:5px;
    } 
    
}
.tagBox .friendsTable,.tagBox .friendsTable2{
	width: 100%;
	margin-bottom: 60px;
	border-left: none;
	border-right: none;
}
.tagBox table.friendsTable th{
	background: transparent;
	font-size: 1.8rem;
	border:none;
	/*font-weight: 700;*/
}
.tagBox table.friendsTable tr:nth-child(odd),
.tagBox table.friendsTable2 tr:nth-child(odd){
	background: #f5f5f5;
}
.tagBox table.friendsTable td{
	/*width: calc(100% / 3);*/
	border:none;
}
.tagBox table.friendsTable tr{
	border-bottom: 1px solid #ccc;
}

.tagBox .friendsTable2 td{
	width: 50%;
	text-align: center;
	border-left: none;
	border-right: none;
}
.friendsTable2 td span{
	font-weight: 700;
	font-size: 2.0rem;
}
a.sokidsorg,
a.nosterinc,
a.sagaraorjp{
    display:flex;
    align-items: center;
}
a.sokidsorg::before,
a.nosterinc::before,
a.sagaraorjp::before{
    content:"";
    width:150px;    
    display:inline-block;
    background-size:150px auto;
    background-repeat:no-repeat;
    margin-right:10px;
}
a.sokidsorg::before{
    height:90px;
    background-image:url(https://ayaweek.jp/2022/wp-content/uploads/2022/02/sokidsorg.png);
}
a.nosterinc::before{
    height:43.5px;
    background-image:url(https://ayaweek.jp/2022/wp-content/uploads/2022/02/nosterinc.png)
}
a.sagaraorjp::before{
    height:46.5px;
    background-image:url(https://ayaweek.jp/2022/wp-content/uploads/2022/02/sagaraorjp.png);
}
@media only screen and (max-width:999px){
    a.sokidsorg,
    a.nosterinc,
    a.sagaraorjp{
        display:block;
    }
    a.sokidsorg::before,
    a.nosterinc::before,
    a.sagaraorjp::before{
        width:150px;    
        display:block;
        background-size:150px auto;
        margin:0px auto 5px;        
    }
    a.sokidsorg::before{
        height:90px;
    }
    a.nosterinc::before{
        height:43.5px;
    }
    a.sagaraorjp::before{
        height:46.5px;
    }
}
@media only screen and (max-width:999px){
	.linkBtn6{display: inherit;}
	.linkBtn6 > div{
		width: 100%;
		margin-bottom: 10px;
	}
	.tagBox .friendsTable2{border-top: none;}
	.tagBox .friendsTable td,
	.tagBox .friendsTable2 td{
		width: 100%;
		display: block;
		border-bottom: none;
	}
	.tagBox table.friendsTable2 tr:nth-child(odd){background: none;}
	.tagBox table.friendsTable2 td:nth-child(odd){background: #f5f5f5;}
	.tagBox .friendsTable2 td.noneSp{display: none;}
}
/*Voice*/
.single-post .breadcrumbs{
    margin: 0 auto 50px;
}
@media only screen and (max-width:999px){
    .single-post .breadcrumbs{
        margin: 0 auto 0px;
    }
}
.voiceList3 .voiceTitle{
    font-size:1.8rem;
    font-weight:600;
}
.voiceList3 .voiceName{
	line-height: 100%;
	font-size: 3.4rem;
    padding-top: 5px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
    text-align:center;
    letter-spacing: 0.02em;
}
.voiceList3 .voiceInfo{
    padding: 15px 0 0px 0px;
}
.voiceList3{
    display:flex;
    flex-wrap:wrap;
	gap:25px;
}
.voiceList3 > li{
    width:calc((100% - 25px)/2);
    /*margin:0 24.9px 25px 0;*/
    background-color:rgba(255,255,255,1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.voiceList3 > li{
    padding:15px;
    transition: 0.3s;
}
.voiceList3 > li:hover{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
/*.voiceList3 > li:nth-child(2n){
    margin-right:0;
}*/
.voiceList3 > li > a{
    text-decoration: none;
    color:#000;
}
.voiceList3 .flexBox1{
    margin-bottom:0px;
}
.voiceList3 > li img{
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.voiceList3 > li a > div:first-child > div:nth-child(2){
    position:relative;
    padding-top:5%;
    display:flex;
    align-items: center;
    flex-direction: column;
}

/* 広告企業を4つ等間隔に並べる */
.voiceListCompanies {
  display: grid;
  /* 4列等幅で並べる。計算式はブラウザに任せる */
  grid-template-columns: repeat(4, 1fr);
  /* 要素同士の間隔 */
  gap: 25px;
  /* リストのデフォルト余白をリセット */
  padding: 10px; 
  margin: 0;
  list-style: none;
}

.voiceListCompanies > li {
  /* calcでの幅指定は不要になります */
  position: relative;
  background-color: #f5f5f5;
  /* ボーダーやパディングが幅を突き破らないように設定 */
  box-sizing: border-box;
  /* シャドウ */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  /* 念のため、中身がはみ出さないよう設定 */
  overflow: visible; 
}

/*旧 協賛企業配置
.voiceListCompanies{
    display: flex;
    flex-wrap: wrap;
	gap:25px;
}

.voiceListCompanies > li{
	width:calc((100% - 75px) /4 );
    position:relative;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background-color:#f5f5f5;
}
*/

#container .voiceListCompanies > li a[target="_blank"]::after{
    position:absolute;
    right:0.5em;
    top:0em;
    margin-left:0;
}
.voiceListCompanies .voiceCompanyName{
    display:flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px 5px;
}
.voiceListCompanies .voiceCompanyName > div{display:inline-block;}

@media only screen and (max-width:999px){
    .voiceList3 .voiceTitle{
        font-size:0.9em;
    }
    .voiceList3 .voiceName{
        font-size:1.2em;
		padding-top: 0;
		padding-bottom:0;
        margin-bottom:0px;
    }
    .voiceList3 .voicePosition{
        font-size:0.85em;
        padding-top:10px;
    }
    .voiceList3 .voiceInfo{
        padding: 0 10px 10px;
    }
	.voiceList3{
		gap:15px 15px;
	}
    .voiceList3 > li{
        width:calc((100% - 15px)/2);
    }
    .voiceList3 > li{
        padding:0px;
    }

    .voiceList3 > li > a{
        text-decoration: none;
        color:#000;
    }
    .voiceList3 .flexBox1{
        margin-bottom:10px;
    }
    .voiceList3 .flexBox1 > div:nth-of-type(1){
        margin-bottom:10px;
    }
    .voiceList3 > li a > div:first-child > div:nth-child(2){
        padding:0 10px;
    }
    .voiceList3 > li a > div:first-child > div:nth-child(2)::before{
        font-size: 2rem;
    }

    .voiceListCompanies {
        /* 999px以下では2列等幅に自動切り替え */
        grid-template-columns: repeat(2, 1fr);
        /* スマホ用に間隔を少し詰めたい場合はここを調整（例: gap: 15px;） */
        gap: 15px;
    }
    /* 旧 協賛企業配置
    .voiceListCompanies{
        gap:15px;
    }
    .voiceListCompanies > li{
        width:calc((100% - 15px) /2 );
    }
    */

    #container .voiceListCompanies > li a[target="_blank"]::after{
        position:absolute;
        right:0.5em;
        top:0em;
        margin-left:0;
    }
    .voiceListCompanies .voiceCompanyName{
        display:flex;
        flex-direction: column;
        align-items: center;
        padding: 0 10px 5px;
    }
    .voiceListCompanies .voiceCompanyName > div{display:inline-block;}

}
/*Voice詳細*/
.voiceDetailTitle{
    text-align: center;
    font-size:1.5em;
    font-weight:600;
    margin-bottom:50px;
}
.voiceDetailFt{
    display:flex;
    flex-direction: column;
}
.voiceDetailPosition{font-size:0.9em;}
.voiceDetailName{font-size:1.2em;}
@media only screen and (max-width:999px){
    .voiceDetailTitle{
        text-align: left;
        font-size:1.3em;
        margin-bottom:15px;
    }
}
/*タブ切り替え*/
.voice .noContent{
	padding: 25px 20px 0 25px;
	background: rgba( 255, 255, 255, 1.0);
}
.voice .content_area > div:nth-child(1) {
    padding: 25px 20px 25px 25px;
	background: rgba( 255, 255, 255, 1.0);
}
.voice .content_area p{
    margin-bottom:0;
}
.voice .hide {
	display: none;
}
.voice .tab_area {
	display: flex;
	flex-wrap: wrap;
}
.voice .tab_area li {
    display: flex;
	width: calc( (100% - 1px ) / 2 );
}
.voice .tab_area li:last-child {
	margin-right: 0;
}
.voice .tab_area li h2 {
	display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
	text-align: center;
    border-radius: 10px 10px 0 0;
    font-size: 1.9rem;
	position: relative;
}

/*タブ未選択　カラー*/
.voice #tab1 { 
    background: rgba(0,159,232,0.1);
    color: #009fe8;
    border:1px solid rgba(0,159,232,0.1);
}
.voice #tab2 {
    background: rgba(214,0,108,0.1);
    color: #d6006c;
    border:1px solid rgba(255,153,51,0.1);
}
.voice #tab1,.voice #tab2{
    border-bottom:0;
}
.voice .tab1area > div:first-child{background-color: rgba(0,159,232,0.1);}
.voice .tab2area > div:first-child{background-color: rgba(214,0,108,0.1);}
/*タブ選択時　カラー*/
.voice .select > #tab1,.voice .select > #tab2{
    border:0px;
}
.voice .select > #tab1 { background: #009fe8; color: #fff; }
.voice .select > #tab2 { background: #d6006c; color: #fff; }
.voice .select > #tab1::after,
.voice .select > #tab2::after{
	content: "";
	display: block;
    width:calc(100% * 2);
	height: 3px;
	position: absolute;
}
.voice .select > #tab1::after { background: #009fe8; }
.voice .select > #tab2::after { background: #d6006c; left: -100%; }
.archive.home h3{
    margin-bottom:15px;
    font-size:2.5rem;
    text-align: center;
    font-weight:700;
}
.archive.home  .voice .tab1area > div:first-child h3{color:#009fe8;}
.archive.home  .voice .tab2area > div:first-child h3{color:#d6006c;}
@media only screen and (max-width:999px) {
	.voice .content_area > div:nth-child(1) {
		padding: 15px 15px;
	}
	.voice .hide {
		display: none;
	}
	.voice .tab_area li {
		width: calc( 100% / 2 );
		margin-right: 0;
	}
	.voice .tab_area li h2 {
        width: 100%;
        height: 50px;
        line-height: 1.4;
        font-size: 1.4rem;
        display:flex;
        align-items:center;
        justify-content: center;
	}
	.voice .select > #tab1::after,
	.voice .select > #tab2::after{
		content: "";
		display: block;
		width: calc(( 100vw - 30px));
        min-width:100px;
		height: 3px;
		position: absolute;
        bottom:0;
	}    
    .voice .select > #tab1::after { 
        left:0;
    }
    .voice .select > #tab2::after {
        left: -100%; 
    }
}

/*voice ヤンセンファーマ*/
.janssenMain{
    margin-right:25%;
}
.janssenBlue{color:#003478;}
.janssenRed{
    color:#E71D16;
    padding-right:100px;
}
#container .janssenRed > p:nth-child(1){
    margin-bottom:80px;
}
.janssenRed,.companyName{
    font-size:2.5rem
}
.companyName span{
    font-size:0.8em;
    display:block;
}
@media only screen and (max-width:999px){
    .janssenMain{
        margin-right:0;
    }
    .janssenRed{
        padding-right:0px;
    }
    #container .janssenRed > p:nth-child(1){
        margin-bottom:25px;
    }
    .janssenRed,.companyName{
        font-size:1.6rem
    }
    .companyName span{
        font-size:0.8em;
        display:block;
    }
}

.flagWrap .flagMap{
    & .flagMenu{
        margin-bottom:15px;
        & ul{
            display:flex;
            flex-direction: column;
            margin-bottom:0;
            justify-content: center;
            height:100%;
            & > li{
                list-style-type:none;
                display:flex;
                margin:0 0 10px 5px;
                & a{
                    text-decoration:none;
                    padding:2px 15px;
                    background-color:#f5f5f5;
                    border-radius: 5px;
                    width:100%;
                    height:50px;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    &:hover{
                        background-color:#787878;
                        color:#ffffff;
                    }
                }
            }
        }
    }

}
.flagWrap .tagBox .friendsList3,
.flagWrap .tagBox .friendsList5{
    margin-bottom:0px;
}
.flagWrap .tagBox .friendsList3 ul,
.flagWrap .tagBox .friendsList5 ul{
    margin-bottom:0;
}
.flagWrap .tagBox .postLabel a{
    text-decoration:none;
}
.flagWrap .tagBox .friendsList3 ul > li .postLabel a,
.flagWrap .tagBox .friendsList5 ul > li .postLabel a{
    color:#d6006c;
}

/*flag*/
.flagWrap .tagBox.flagDetail{
    .flagList{
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 0px;
        & > div,& .flagListItem{
            border-bottom:1px dotted #ccc;
            &:nth-child(2n+1) > div{
                margin:0;
                padding: 24.5px 24.5px 24.5px 0px;
                position:relative;                
                &::before{
                    content:"";
                    height:100%;
                    width:1px;
                    display:inline-block;
                    position:absolute;
                    border-left: 1px dotted #ccc;
                    left:100%;
                    z-index:-1;
                }
            }
            &:nth-child(2n) > div{
                margin:0px;
                padding: 24.5px 0px 24.5px 24.5px;
            }
            &:nth-child(1),&:nth-child(2){
                border-top:none;
            }
            & > div,& .flagListItemInner{
                height:100%;
                & .flagList1{
                    & a{
                        text-decoration: none;
                        color:#000;
                    }
                    & > ul{
                        display:flex;
                        flex-wrap: wrap;
                        margin-bottom:0;
                        gap:10px 15px;
                        & > li{
                            margin-left:0;
                            list-style-type: none;
                            width:calc((100% - 15px)/2 );
                        }                        
                    }
                }
            }
            &.wide{
                grid-column: 1 / 3;
                grid-row:auto;
                width:100%;
                border-bottom:0px;
                border-top:1px dotted #ccc;
                &#hk{border-top:0px}
                &:nth-child(2n+1) > div::before{
                    display:none;
                }
                & > div, & .flagListItemInner{
                    padding: 24.5px 0px;
                    background-color:#fff;
                    & .flagList1 > ul{
                        gap:10px 15px;
                        & > li{
                            list-style-type: none;
                            width:calc((100% - 45px)/4 );
                            & > div{
                                position: relative;
                                display:block;
                                width: 100%;
                                & img{
                                    display:block;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#container .flagWrap .tagBox{
    & .regionBlock{
        margin-top:100px;
    }
    h2{
        margin-bottom:0;
        &#hk{
            margin-bottom:30px;
        }
    }
    h3{
        position:relative;
        padding-left:15px;
        &::before,&::after{
            position:absolute;
            content:"";
            width:2px;
            height:0.8em;
            display:inline-block;
            background-color:#333;
            bottom:0.2em;
        }
        &::before{
            transform: rotate(-30deg);
            margin-left:-15px;
        }
        &::after{
            transform: rotate(30deg);
            margin-left:15px;
        }
    }
    & .flagItemInfo{
        width: 100%;
        color: #000;
        height: auto;
        display:block;
    }
    & .flagName{
        font-size:1.7rem;
        padding:10px 0 0;
    }
    & p.preparingTxt{
        margin-bottom:70px;
    }
}
@media only screen and (max-width:999px) {
    .flagWrap .tagBox.flagDetail{
        .flagList{
            display: block; 
            & > div,& .flagListItem{
                border-bottom:1px dotted #ccc;
                &:nth-child(2n+1) > div,
                &:nth-child(2n) > div{
                    padding: 15px 0px 5px;
                    position:static;
                    &::before{
                        display:none;
                    }
                }
                & > div,& .flagListItemInner{
                    height:100%;
                    & .flagList1{
                        & > ul{
                            gap:10px 10px;
                            & > li{
                                width:calc((100% - 10px)/2 );
                            }
                        }
                    }
                }
                &.wide{
                    border-bottom:0px;
                    border-top:1px dotted #ccc;
                    &#hk{border-top:0px}
                    &:nth-child(2n+1) > div::before{
                        display:none;
                    }
                    & > div, & .flagListItemInner{
                        padding: 15px 0px 5px;
                        background-color:#fff;
                        & .flagList1 > ul{
                            gap:10px 10px;
                            & > li{
                                width:calc((100% - 10px)/2 );
                            }                            
                        }
                    }
                }
            }
        }
    }
    #container .flagWrap .tagBox{
        & .regionBlock{
            margin-top:60px;
        }
        h2{
            margin-bottom:10px;
            &#hk{
                margin-bottom:20px;
            }
        }
        h3{
            position:relative;
            padding-left:15px;
            font-size:2.2rem;
        }
        & .flagItemInfo{
            width: 100%;
            position: static;
            background:transparent;
            color: #000;
            height: auto;
            display: block;
            opacity: 1;
            padding:0px;
            margin-bottom:10px;
        }
        & .flagName{
            font-size:1.6rem;
            padding:5px 0 0;
        }
        & p.preparingTxt{
            margin-bottom:70px;
        }
    }
}

/*map*/
/* マップの位置 */
:root {
    --map-div-width: 7%;
    --map-div-height: 70px;
    --map-hokkaido-btm :1vw;
}
@media only screen and (max-width:1450px) {
:root {
    --map-div-height: 5vw;
}
}
@media only screen and (max-width:999px) {
    :root {
    --map-div-height: 8vw;
}
}
.flagMap{
    display:flex;
    --map-width:80%
}
.flagMap > ul{
    width:var(--map-width);
    margin-right:25px;
}
.flagMap > div{
    width:calc(100% - var(--map-width) - 25px);
}
ul.jp_map {
    position: relative;
    list-style-type: none;
    padding: 0;
    padding-top:calc((var(--map-div-height) * 11) + var(--map-hokkaido-btm) + 25px);
}
.jp_map > li .prefecture > a > div,
.jp_map > li .prefecture > div{
    color: #000;
    text-shadow: 
    #fff 2px 0px,
    #fff -2px 0px,
    #fff 0px -2px,
    #fff 0px 2px,
    #fff 2px 2px,
    #fff -2px 2px,
    #fff 2px -2px,
    #fff -2px -2px,
    #fff 1px 2px,
    #fff -1px 2px,
    #fff 1px -2px,
    #fff -1px -2px,
    #fff 2px 1px,
    #fff -2px 1px,
    #fff 2px -1px,
    #fff -2px -1px;
    border-radius: 5px;
    min-height:calc(1em + 10px);
    background-color:#ccc;
    width: var(--map-div-width);
    height: var(--map-div-height);
    border: solid #ffffff 2px;
    padding: 7px 0;
    font-size: 1.4rem;
    position: absolute;
    display:flex;
    align-items: center;
    justify-content: center;
}
.jp_map > li .prefecture > a > div > span,
.jp_map > li .prefecture > div > span{
    display:inline-block;
}
.jp_map li:nth-child(1) .prefecture > a > div,
.jp_map li:nth-child(1) .prefecture > div{
    top: 0;
    left: calc(100% - (var(--map-div-width) *2));
    width: calc(var(--map-div-width) *2);
    height: calc(var(--map-div-height) *2);  
}
.jp_map li:nth-child(2) .prefecture > a > div,
.jp_map li:nth-child(2) .prefecture > div{
    top: calc((var(--map-div-height) *2) + var(--map-hokkaido-btm));
    left: calc(100% - ( var(--map-div-width) + (var(--map-div-width) / 2)) );
}
.jp_map li:nth-child(3) .prefecture > a > div,
.jp_map li:nth-child(3) .prefecture > div {
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + var(--map-div-height));
    left: calc(100% - var(--map-div-width));
}
.jp_map li:nth-child(4) .prefecture > a > div,
.jp_map li:nth-child(4) .prefecture > div {
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 2));
    left: calc(100% - var(--map-div-width));
}
.jp_map li:nth-child(5) .prefecture > a > div,
.jp_map li:nth-child(5) .prefecture > div {
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + var(--map-div-height));
    left: calc(100% - ( var(--map-div-width) * 2));
}
.jp_map li:nth-child(6) .prefecture > a > div,
.jp_map li:nth-child(6) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 2));
    left: calc(100% - ( var(--map-div-width) * 2));
}
.jp_map li:nth-child(7) .prefecture > a > div,
.jp_map li:nth-child(7) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 3));
    left: calc(100% - var(--map-div-width));
}
.jp_map li:nth-child(8) .prefecture > a > div,
.jp_map li:nth-child(8) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - var(--map-div-width));
}
.jp_map li:nth-child(9) .prefecture > a > div,
.jp_map li:nth-child(9) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 2 ));
}
.jp_map li:nth-child(10) .prefecture > a > div,
.jp_map li:nth-child(10) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 3 ));
}
.jp_map li:nth-child(11) .prefecture > a > div,
.jp_map li:nth-child(11) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc(100% - ( var(--map-div-width) * 2 ));
}
.jp_map li:nth-child(12) .prefecture > a > div,
.jp_map li:nth-child(12) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc(100% - var(--map-div-width));
}
.jp_map li:nth-child(13) .prefecture > a > div,
.jp_map li:nth-child(13) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6));
    left: calc(100% - ( var(--map-div-width) * 2 ));
}
.jp_map li:nth-child(14) .prefecture > a > div,
.jp_map li:nth-child(14) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6));
    left: calc(100% - ( var(--map-div-width) * 3 ));
}
.jp_map li:nth-child(15) .prefecture > a > div,
.jp_map li:nth-child(15) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 3));
    left: calc(100% - ( var(--map-div-width) * 3 ));
    width: calc(var(--map-div-width) * 2);
}
.jp_map li:nth-child(16) .prefecture > a > div,
.jp_map li:nth-child(16) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 3));
    left: calc(100% - ( var(--map-div-width) * 4 ));
}
.jp_map li:nth-child(17) .prefecture > a > div,
.jp_map li:nth-child(17) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 3));
    left: calc(100% - ( var(--map-div-width) * 5 ));
}
.jp_map li:nth-child(18) .prefecture > a > div,
.jp_map li:nth-child(18) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 5 ));
}
.jp_map li:nth-child(19) .prefecture > a > div,
.jp_map li:nth-child(19) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc(100% - ( var(--map-div-width) * 3 ));
}
.jp_map li:nth-child(20) .prefecture > a > div,
.jp_map li:nth-child(20) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 4 ));
    height: calc( var(--map-div-height) * 3);
}
.jp_map li:nth-child(21) .prefecture > a > div,
.jp_map li:nth-child(21) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc(100% - ( var(--map-div-width) * 5 ));
}
.jp_map li:nth-child(22) .prefecture > a > div,
.jp_map li:nth-child(22) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 7));
    left: calc(100% - ( var(--map-div-width) * 4 ));
}
.jp_map li:nth-child(23) .prefecture > a > div,
.jp_map li:nth-child(23) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6));
    left: calc(100% - ( var(--map-div-width) * 5 ));
}
.jp_map li:nth-child(24) .prefecture > a > div,
.jp_map li:nth-child(24) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6));
    left: calc(100% - ( var(--map-div-width) * 6 ));
}
.jp_map li:nth-child(25) .prefecture > a > div,
.jp_map li:nth-child(25) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 6 ));
}
.jp_map li:nth-child(26) .prefecture > a > div,
.jp_map li:nth-child(26) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 7 ));
}
.jp_map li:nth-child(27) .prefecture > a > div,
.jp_map li:nth-child(27) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc(100% - ( var(--map-div-width) * 7 ));
}
.jp_map li:nth-child(28) .prefecture > a > div,
.jp_map li:nth-child(28) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 8 ));
    height:  calc( var(--map-div-height) * 2);
}
.jp_map li:nth-child(29) .prefecture > a > div,
.jp_map li:nth-child(29) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc(100% - ( var(--map-div-width) * 6 ));
}
.jp_map li:nth-child(30) .prefecture > a > div,
.jp_map li:nth-child(30) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6));
    left: calc(100% - ( var(--map-div-width) * 7 ));
}
.jp_map li:nth-child(31) .prefecture > a > div,
.jp_map li:nth-child(31) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 9 ));
}
.jp_map li:nth-child(32) .prefecture > a > div,
.jp_map li:nth-child(32) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc(100% - ( var(--map-div-width) * 10 ));
}
.jp_map li:nth-child(33) .prefecture > a > div,
.jp_map li:nth-child(33) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc(100% - ( var(--map-div-width) * 9 ));
}
.jp_map li:nth-child(34) .prefecture > a > div,
.jp_map li:nth-child(34) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc(100% - ( var(--map-div-width) * 10 ));
}
.jp_map li:nth-child(35) .prefecture > a > div,
.jp_map li:nth-child(35) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4) + ( var(--map-div-height) /2));
    left: calc(100% - ( var(--map-div-width) * 11 ));
}
.jp_map li:nth-child(36) .prefecture > a > div,
.jp_map li:nth-child(36) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 7) + ( var(--map-div-height) /2));
    left: calc(100% - ( var(--map-div-width) * 9 ));
}
.jp_map li:nth-child(37) .prefecture > a > div,
.jp_map li:nth-child(37) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6) + ( var(--map-div-height) /2));
    left: calc(100% - ( var(--map-div-width) * 9 ));
}
.jp_map li:nth-child(38) .prefecture > a > div,
.jp_map li:nth-child(38) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6) + ( var(--map-div-height) /2));
    left: calc(100% - ( var(--map-div-width) * 10 ));
}
.jp_map li:nth-child(39) .prefecture > a > div,
.jp_map li:nth-child(39) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 7) + ( var(--map-div-height) /2));
    left: calc(100% - ( var(--map-div-width) * 10 ));
}
.jp_map li:nth-child(40) .prefecture > a > div,
.jp_map li:nth-child(40) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: calc( var(--map-div-width) *2);
}
.jp_map li:nth-child(41) > .prefecture > a > div,
.jp_map li:nth-child(41) > .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: var(--map-div-width);
}
.jp_map li:nth-child(42) .prefecture > a > div,
.jp_map li:nth-child(42) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 4));
    left: 0;
}
.jp_map li:nth-child(43) .prefecture > a > div,
.jp_map li:nth-child(43) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: var(--map-div-width);
}
.jp_map li:nth-child(44) .prefecture > a > div,
.jp_map li:nth-child(44) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 5));
    left: calc( var(--map-div-width) *2);
}
.jp_map li:nth-child(45) .prefecture > a > div,
.jp_map li:nth-child(45) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6));
    left: calc( var(--map-div-width) *2);
}
.jp_map li:nth-child(46) .prefecture > a > div,
.jp_map li:nth-child(46) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 6));
    left: var(--map-div-width);
}
.jp_map li:nth-child(47) .prefecture > a > div,
.jp_map li:nth-child(47) .prefecture > div{
    top: calc(((var(--map-div-height) *2) + var(--map-hokkaido-btm)) + ( var(--map-div-height) * 8));
    left: 0;
}
.jp_map li .prefecture > a > div.flag_on,
.jp_map li .prefecture > div.flag_on{
background-image:radial-gradient(at 29% 0%, rgba(255, 245, 166, 1) 29%, rgba(255, 255, 255, 0) 91%), linear-gradient(189deg, rgba(255, 2, 154, 1) 1%, rgba(255, 2, 154, 0.16) 53%), linear-gradient(314deg, rgba(178, 2, 255, 1) 1%, rgba(255, 2, 154, 0) 30%), linear-gradient(4deg, rgba(2, 209, 255, 1) 41%, rgba(255, 2, 154, 0))} 
@media only screen and (max-width:999px){
    .flagMap{
        display:flex;
        flex-direction: column;
        --map-width:100%
    }
    .flagMap > ul,.flagMap > div{
        width:var(--map-width);
        margin-right:0px;
    }

    .jp_map li .prefecture > a > div,
    .jp_map li .prefecture > div{
        font-size:2.2vw;
        text-shadow: none;
        flex-direction: column;
    }
    .jp_map li .prefecture > a > div > span,
    .jp_map li .prefecture > div > span{
        display:block;
        width:calc(1em + 2px);
        padding:0px 1px 1px 1px;
        height:calc(1em + 2px);
        line-height:1.1;
        overflow: hidden;
        background-color:#fff;
        border-radius: 4px;
    }        
}