@charset "UTF-8";


/* ######################################################################################

　アニメーション

###################################################################################### */
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeUp {
    0%   {transform: translateY(50px); opacity: 0;}
    50%  {transform: translateY(-2px);}
    100% {transform: translateY(0); opacity: 1;}
}
@keyframes fadeRight {
    0%   {opacity: 0; transform: translateX(50px);}
    100% {opacity: 1; transform: translateX(0);}
}
@keyframes fadeLeft {
    0%   {opacity: 0; transform: translateX(-50px);}
    100% {opacity: 1; transform: translateX(0);}
}

.effect.fadeIn,
.effect.fadeUp,
.effect.fadeRight,
.effect.fadeLeft {opacity: 0;}

body.fade .effect {opacity:1;}

.effect.fadeIn.insert {animation-name: fadeIn; animation-duration: 3s; animation-timing-function: ease; animation-fill-mode: forwards;}
.effect.fadeUp.insert {animation-name: fadeUp; animation-duration: 1.0s; animation-timing-function: ease-in-out; animation-fill-mode: forwards;}

.effect.fadeLeft.insert {animation-name: fadeLeft; animation-duration: 1s; animation-timing-function: ease; animation-fill-mode: forwards;}
.effect.fadeRight.insert {animation-name: fadeRight; animation-duration: 1s; animation-timing-function: ease; animation-fill-mode: forwards;}

/* ######################################################################################

　帯背景　wallBelt

###################################################################################### */
@media print, screen and (min-width: 768px) {
    .wallBelt {
        padding: 60px 0;
        overflow: hidden;
    }
    .wallBelt.zero { padding: 0 0; }
    .wallBelt.narrow { padding: 30px 0; }
    .wallBelt.wide { padding: 80px 0; }
	.wallBelt.bottomzero{padding: 60px 0 0;}
}

@media screen and (max-width: 767px) {
    .wallBelt { padding: 30px 0; }
    body:not(.pageIndex) .wallBelt{ padding-top: 60px; }
    .wallBelt.zero { padding: 0 0; }
    .wallBelt.narrow { padding: 15px 0; }
    .wallBelt.wide { padding: 40px 0; }
}


/* 背景 */
.bgGray {
    background-color: #F8F8F8;
    padding: 1.5em;
}
.bgGray.reverse {
    border: 10px solid #F8F8F8;
    background-color: transparent;
    padding: 1.5em;
}
.bgGray p:last-of-type{
    margin-bottom: 0;
}

/* 背景ボーダー付き */
.bgGrayBorder {
    background-color: #F8F8F8;
	border: 1px solid #707070;
	padding: 0.8em 1em !important;
    text-indent: 0 !important;
	margin: 1em 0;
}
.bgGray.reverse {
    border: 10px solid #F8F8F8;
    background-color: transparent;
    padding: 1.5em;
}
.bgGrayBorder p:last-of-type,
.bgGray p:last-of-type{
    margin-bottom: 0;
}
.bgBrightGreen {
    background-color: #def3e5;
    padding: 1.8em 1.5em 1.2em 1.5em;
    margin-bottom: 1.5em;
}
.bgBrightGreen p:last-of-type,
.bgBrightPurple p:last-of-type{
    margin-bottom: 0.5em;
}
.bgBrightPurple {
    background-color: #f3eef5;
    padding: 1.8em 1.5em 1.2em 1.5em;
    margin-bottom: 1.5em;
}


/* ######################################################################################

　表示・非表示　pc sp

###################################################################################### */

/* ====================================================
　表示・非表示
==================================================== */
br.pc, span.pc, em.pc, img.sp, div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp, nav.sp, table.sp, figcaption.sp,
br.sp, span.sp, em.sp, img.pc, div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc, nav.pc, table.pc, figcaption.pc {display:none;}
@media print, screen and (min-width: 768px) {
    div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc, nav.pc, figcaption.pc { display: block; }
    img.pc, span.pc, em.pc, br.pc { display: inline; }
    table.pc { display: table; }
}
@media screen and (max-width: 767px) {
    div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp, nav.sp ,table.sp, figcaption.sp { display: block; }
    img.sp, span.sp, em.sp, br.sp { display: inline; }
    table.sp { display: table; }
}

/* ######################################################################################

　ブレイクポイントで画像を切り替える：resImg.js

###################################################################################### */
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px){
    .resImg {width:100%; height:auto;}
}

/* ######################################################################################

    下層ページタイトル

###################################################################################### */
/* ====================================================
    写真部分 + ページタイトル
==================================================== */
/* ===各ページ背景はpage.cssに追記する※
====================== */
.pageTitle {
		background: #F8F8F8;
		position: relative;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		z-index: -10;
}
	.pageTitle h1 {
		line-height: 1.2;
		position: absolute;
		font-weight: 600;
        width: 100%;
        left: 0;
	}	
	.pageTitle h1 .small{
		display: block;
		padding-top: 0.5em;
	}

@media print, screen and (min-width: 768px) {
	.pageTitle {height: 180px;}
	.pageTitle h1 {text-align: center; font-size: 3.0rem;color: #000; top: 50%; transform: translateY(-50%);letter-spacing: 0.1em;}	
	.pageTitle h1 .small{font-size: 1.4rem;	letter-spacing: 0.2em;}
	.pageTitle h1 span.colred{font-size:20px;}
}
@media screen and (max-width: 767px) {
    .pageTitle {width: 100%; height: 150px;}
    .pageTitle h1 {font-size:2.0rem; color: #000; top: 50%; transform: translateY(-50%); z-index: 11; padding-left: 15px; padding-right: 15px;}
	.pageTitle h1 .small{font-size: 1.4rem;}
	.pageTitle h1 span.colred{padding-top: 10px;}
	
}





/* ######################################################################################

　フォントサイズ　fontsize

###################################################################################### */
.fontExSmall{font-size: 1.1rem;}
.fontSmall{font-size: 1.3rem; line-height: 2;}
.fontUsually{font-size: 1.4rem;}
.fontRegular{font-size: 1.5rem;}
.fontLarge{font-size: 1.8rem; line-height: 1.675;}
.fontExLarge{font-size: 2.2rem; line-height: 1.45;}
.fontEExLarge{font-size: 2.6rem; line-height: 1.45;}
.fontEEExLarge{font-size: 6.0rem; line-height: 1.45;}

@media screen and (max-width: 767px) {
    .fontExLarge{font-size: 1.8rem; line-height: 1.45;}
    .fontEExLarge{font-size: 2.2rem; line-height: 1.45;}
	.fontEEExLarge{font-size: 3.6rem; line-height: 1.45;}
}


.fontBold{font-weight: bold;}
.textUnderLine{text-decoration: underline;}

/* ######################################################################################

　フォントカラー　fontcolor

###################################################################################### */
.colblack{ color:#111;}
.colgray{ color:#B9B9B9;}
.colmsgreen{ color:#0A6733;}
.colgreen{ color:#009935;}
.colskyblue{ color:#1381D6;}
.colred{color:#E42E1B;}
.colpurple{color:#833C9D;}
.colnavy{color:#151D35;}

.fontred{color: #E42E1B;}
.colyellow{color: #F0FF00;}

/* ######################################################################################

　タイトル　title

###################################################################################### */

/* ====================================================
　デフォルトタイトル
==================================================== */

h2,h3,h4,h5,h6 {
    margin:0 0 0.75em;
    padding:0;
    line-height: 1.25;
    font-weight:600;
    font-size:100%;
}
/* ====================================================
    太字タイトル
==================================================== */
.boldStyle{font-weight: bold;}
.boldTitle{
    color: #111;
    font-size: 1.8rem;
    font-weight: bold;
}
.boldTitle.small{
    font-size: 1.6rem;
}

@media print, screen and (min-width: 768px) {
    .boldTitle.oswald{font-size: 5rem; letter-spacing: 0.05em;}
}
@media screen and (max-width: 767px) {
    .boldTitle.oswald{font-size: 3rem; letter-spacing: 0.05em;}
}



/* ====================================================
    緑　短い下線のタイトル
==================================================== */
.greenUnderLineTitle{
    font-weight: normal;
    position: relative;
    margin-bottom: 1.4em;
    line-height: 1.5;
}
.greenUnderLineTitle span{
    margin-left: 1.5em;
    font-size: 0.7em;
    color: #009935;
}

.greenUnderLineTitle:before{
    content: "";
    width: 40px;
    height: 3px;
    position: absolute;
    bottom: -10px;
    left: 0;
    background-color: #009935;
}

@media print, screen and (min-width: 768px) {
    .greenUnderLineTitle{font-size: 2.6rem;}
    * + .greenUnderLineTitle,
    .main > .greenUnderLineTitle:first-child{margin-top: 2em;}
	
}
@media screen and (max-width: 767px) {
    .greenUnderLineTitle{font-size: 2.2rem;}
}

/* 色 */
.greenUnderLineTitle.skyBlue span{color: #59B1CC;}
.greenUnderLineTitle.skyBlue:before{background-color: #59B1CC;}
.greenUnderLineTitle.purple span{color: #A367B9;}
.greenUnderLineTitle.purple:before{background-color: #A367B9;}



/* ====================================================
      color2Title
==================================================== */
.color2Title:before,
.color2Title:after{
	content:"";
    display:inline-block;
    position:absolute;
	width:3px;
}
.color2Title:before{
    top:0;
    left:0;
    background:#009935;
    height:100%;
}
.color2Title:before{
    top:0;
    left:0;
    background:#009935;
    height:100%;
}
.color2Title:after{
    left:0;
    bottom:0;
	background:#E1E1E1;
	height:50%;
}


/* ====================================================
    紫　短い下線のタイトル
==================================================== */
.purpleUnderLineTitle{
    font-weight: normal;
    position: relative;
    margin-bottom: 1.4em;
    line-height: 1.5;
}

.purpleUnderLineTitle:before{
    content: "";
    width: 40px;
    height: 3px;
    position: absolute;
    bottom: -10px;
    left: 0;
    background-color: #833C9D;
}
.purpleUnderLineTitle span{
    margin-left: 1.5em;
    font-size: 0.7em;
    color: #833C9D;
}


@media print, screen and (min-width: 768px) {
    .purpleUnderLineTitle{font-size: 2.6rem;}
    * + .purpleUnderLineTitle,
    .main > .purpleUnderLineTitle:first-child{margin-top: 2em;}
}
@media screen and (max-width: 767px) {
    .purpleUnderLineTitle{font-size: 2.2rem;}
}

/* ====================================================
    緑　背景タイトル
==================================================== */
.greenBgTitle{
    padding: 0.5em 0.6em;
    background-color: #009944;
	color: #fff;
}
.greenBgTitle.center{
    padding: 0.85em;
    text-align: center;
    border-radius: 6px;
    font-weight: normal;
    margin-bottom: 1.5em;
}
.greenBgTitle .small{display: block; margin-top: 0.25em;}


@media print, screen and (min-width: 768px) {
    .greenBgTitle{font-size: 1.6rem;}
    .greenBgTitle.center{font-size: 2.6rem;}
    .greenBgTitle .small{font-size: 60%;}
}
@media screen and (max-width: 767px) {
    .greenBgTitle{font-size: 1.5rem;}
    .greenBgTitle .small{font-size: 70%;}
}

/* 色 */
.greenBgTitle.skyBlue{background-color: #59B1CC;}
.greenBgTitle.purple{background: #A367B9;}



/* ====================================================
    グレー背景タイトル
==================================================== */
.grayBgTitle{
    padding: 0.7em 0.6em;
    background-color: #F8F8F8;
}

@media print, screen and (min-width: 768px) {
    * + .grayBgTitle{margin-top: 40px;}
    .grayBgTitle{font-size: 2.0rem;}
}
@media screen and (max-width: 767px) {
    * + .grayBgTitle{margin-top: 40px;}
    .grayBgTitle{font-size: 1.6rem;}
}

/* ====================================================
    左緑帯タイトル　+　グレー下線
==================================================== */
.titleLeftUnderLine {
    margin-bottom: 1.0em;
    position: relative;
    padding-bottom: 0.75em;
    border-bottom: 1px solid #F2F4F5;
}
.titleLeftUnderLine span {
    position: relative;
    display: inline-block;
    padding-left: 0.75em;
    border-left: 3px solid #009935;
    border-left-style: solid;
    text-decoration:none;
}
.titleLeftUnderLine em{margin-left: 2em;
    font-style: inherit;
    font-size: 0.7em;
    color: #BEC2CC;
    }

@media print, screen and (min-width: 768px) {
	.titleLeftUnderLine{font-size: 2.0rem}
    * + .titleLeftUnderLine{margin-top: 65px;}
}
@media screen and (max-width: 767px) {
	.titleLeftUnderLine{font-size: 1.8rem}
	.titleLeftUnderLine em{display: block; margin-top: 0.25em; margin-left: 1.4em;}
    * + .titleLeftUnderLine{margin-top: 27px;}
}
	
/* 色 */
.titleLeftUnderLine.skyBlue span{border-left-color: #59B1CC;}
.titleLeftUnderLine.purple span{border-left-color: #833C9D;}


/* ====================================================
    グレー下線　+　緑線タイトル
==================================================== */
.greenGrayLineTitle{
    font-size: 2.0rem;
    font-weight: normal;
    border-bottom: 1px solid #dddddd;
}
.greenGrayLineTitle > span{display: inline-block; position: relative; padding: 0.6em 0;}
.greenGrayLineTitle > span:before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;
    background-color: #009935;
}

@media print, screen and (min-width: 768px) {
    .greenGrayLineTitle{font-size: 2.0rem;}
}
@media screen and (max-width: 767px) {
    .greenGrayLineTitle{font-size: 1.7rem;}

}

/* ====================================================
    左　緑線タイトル
==================================================== */
.purpleLeftBorderTitle{
    position: relative;
    font-weight: normal;
    padding-left: 15px;
    line-height: 1.25;
}
.purpleLeftBorderTitle:before{
    content: "";
    width: 4px;
    position: absolute;
    top: 0px;
    left: 0;
    background-color: #833C9D;
}

@media print, screen and (min-width: 768px) {
    .purpleLeftBorderTitle{font-size: 1.8rem;}
    .purpleLeftBorderTitle:before{height: 22px;}
}
@media screen and (max-width: 767px) {
    .purpleLeftBorderTitle{font-size: 1.7rem;}
    .purpleLeftBorderTitle:before{height: 20px;}
}




/* ====================================================
    　上下線タイトル 
==================================================== */
.topUnderLine{border-top: 1px solid #c1bac6; border-bottom: 1px solid #c1bac6;}
.topUnderLine .date{font-family: 'Roboto', sans-serif;}

@media print, screen and (min-width: 768px) {
    .topUnderLine{font-size: 2.6rem; padding: 2.3em 0;}

    
}
@media screen and (max-width: 767px) {
    .topUnderLine{font-size: 1.8rem; padding: 2em 0;}
    .topUnderLine .date{font-size: 1.6rem; font-weight: normal;}
}

/* ====================================================
    太字見出し
==================================================== */
@media print, screen and (min-width: 768px) {
    .boldTitle{font-size: 1.8rem; font-weight: bold;}
}
@media screen and (max-width: 767px) {
    .boldTitle{font-size: 1.5rem; font-weight: bold;}
}


/* ====================================================
    薄い緑背景 + 枠線(グレー)付きのタイトル
==================================================== */
.greenBgBorderTitle a{
    display: block;
    padding: 0.6em 0.8em;
    background: #f4f5f7;
    border: 1px solid #ddd;
    font-size: 1.8rem;
    font-weight: normal;
}

.greenBgBorderTitle a:hover{
    color: #333;
    background: #fff;
    text-decoration: none;
}

/* ====================================================
    緑　下線のタイトル
==================================================== */
.greenLongLineTitle{
    font-size: 1.6rem;
    border-bottom: 2px solid #009935;
    padding-bottom: 0.5em;
}



/* ====================================================
    下矢印ラウンドタイトル
==================================================== */
.arrowDownTitle{
    position: relative;
    padding-left: 25px;
    color: #CC0000;
}
.arrowDownTitle:before{
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 0.3em;
    left: 0;
    background-image: url(../img/contents/share/ico-whiteArrow-down.svg);
    background-repeat: no-repeat;
    background-position: 0;
    -moz-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -ms-background-size: 20px 20px;
    background-size: 20px 20px;
}


.arrowDownTitle .small{
    display: inline-block;
    margin-left: 2em;
    font-weight: normal;
    font-size: 1.4rem;
    color: #3B4043;
}


/* ######################################################################################

    キャッチコピー

###################################################################################### */
/* ====================================================
    緑・ゴシックのキャッチコピー大
==================================================== */
.greenCopy{
    color: #009935;
    line-height: 1.3;
	margin: 0 0 0.5em;
}

@media print, screen and (min-width: 768px) {
    .greenCopy{font-size: 5.2rem;}
}
@media screen and (max-width: 767px) {
    .greenCopy{font-size: 2.8rem;}
}


/* ====================================================
    緑地・明朝体のキャッチコピー
==================================================== */
.greenCopy.serif{
    font-size: 3.0rem;
    color: #009935;
    line-height: 1.6;
}

@media print, screen and (min-width: 768px) {
    .greenCopy.serif{font-size: 3.0rem;}
}
@media screen and (max-width: 767px) {
    .greenCopy.serif{font-size: 1.8rem;}
}


/* ====================================================
    紫・明朝体のキャッチコピー
==================================================== */
.purpleCopy.serif{
    color: #833C9D;
    font-weight: bold;
}

@media print, screen and (min-width: 768px) {
    .purpleCopy.serif{font-size: 2.2rem;}
}
@media screen and (max-width: 767px) {
    .purpleCopy.serif{font-size: 1.8rem;}
}


/* ######################################################################################

     アイコン

###################################################################################### */

/* 矢印ラウンド緑リンク
-------------------------------------*/
.icoGreenArrowRight{position: relative; padding-left: 25px;}
.icoGreenArrowRight:before{
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: -1px;
    left: 0;
    background-image: url(../img/contents/share/ico-greenArrow.svg);
    background-repeat: no-repeat;
    background-position: 0;
    -moz-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -ms-background-size: 20px 20px;
    background-size: 20px 20px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.icoGreenArrowRight:hover:before{
	background-image: url(../img/contents/share/ico-greenArrow-hover.svg);
}

.icoGreenArrowRight[target="_blank"]:after{
    content: "";
    position: relative;
    top: 0.05em;
    width: 0.9em;
    height: 0.9em;
    background-image: url(../img/contents/ico_link_g.svg);
    background-size: 100%;
    display: inline-block;
    margin-left: 3px;
    margin-left: 0.5em;
}
.icoGreenArrowRight[target="_blank"]:not([href$=".pdf"]):after{
    background-image: url(../img/contents/ico_link_bk.svg);
}

/* 矢印ラウンド紫リンク
-------------------------------------*/
.icoPurpleArrowRight{position: relative; padding-left: 25px; color:#833C9D;}
.icoPurpleArrowRight:before{
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: -1px;
    left: 0;
    background-image: url(../img/contents/share/ico-purpleArrow.svg);
    background-repeat: no-repeat;
    background-position: 0;
    -moz-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -ms-background-size: 20px 20px;
    background-size: 20px 20px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


@media print, screen and (min-width: 768px) {
    .icoPurpleArrowRight:hover:before{
        background-image: url(../img/contents/share/ico-purpleArrow-hover.svg);
        
    }
}

/* 下矢印ラウンド緑リンク
-------------------------------------*/
.icoGreenArrowDown{position: relative; padding-left: 25px;}
.icoGreenArrowDown:before{
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: -2px;
    left: 0;
    background-image: url(../img/contents/share/ico-greenDown.svg);
    background-repeat: no-repeat;
    background-position: 0;
    -moz-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -ms-background-size: 20px 20px;
    background-size: 20px 20px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


@media print, screen and (min-width: 768px) {
    .icoGreenArrowDown:hover:before{
        background-image: url(../img/contents/share/ico-greenDown-hover.svg);
    }
}


/* 下矢印ラウンド紫リンク
-------------------------------------*/
.icoPurpleArrowDown{position: relative; padding-left: 25px; color:#833C9D; }
.icoPurpleArrowDown:before{
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: -2px;
    left: 0;
    background-image: url(../img/contents/share/ico-purpleDown.svg);
    background-repeat: no-repeat;
    background-position: 0;
    -moz-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -ms-background-size: 20px 20px;
    background-size: 20px 20px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

@media print, screen and (min-width: 768px) {
    .icoPurpleArrowDown:hover:before{
        background-image: url(../img/contents/share/ico-purpleDown-hover.svg);
    }
}
.noneLine{text-decoration: none;}

/* < の字アイコン
-------------------------------------*/
.icoArrowRight2{position: relative; padding-left: 25px; word-break: break-all;}
.icoArrowRight2:before{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    border: 1px solid #009935;
    border-radius: 10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.icoArrowRight2:after{
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    top: 7px;
    left: 6px;
    border-right: 1px solid #009935;
    border-top: 1px solid #009935;
    transform: rotate(45deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.icoArrowRight2:hover:before{
    background: #009935;
}
.icoArrowRight2:hover:after{
    border-color: #fff;
}

/* ====================================================
 disableリンク
==================================================== */
a.disable:hover,
a.disable{
    color:#cccccc !important;
    cursor:default;
    text-decoration:underline;
}
a.disable:before {border-color:#cccccc !important;}

a.disable:hover:before {border-color:#cccccc !important; background: #fff !important;}

a.disable:hover:after {border-color:#009935 !important;}

/* ====================================================
 ボタン別窓アイコン (target　blankに自動で付与)
==================================================== */
 a.button[target="_blank"]:after {
        content: "";
        display: inline-block;
        margin-left: 0.25em;
        width: 9px;
        height: 8px;
        background-image: url("../../images/acompany/icon_blank.svg");
        background-size: 9px 8px;
    }


/* ====================================================
 PDFアイコン (pdfファイルに自動で付与)
==================================================== */
a[href$=".pdf"]:not(.icoArrowRight2):after{
    content: "";
    position: relative;
    top: 0.2em;
    display: inline-block;
    width: 15px;
    height: 18px;
    background-image: url("../img/contents/ico_pdf2.svg");
    background-size: 15px 18px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
a[href$=".pdf"].noicon:after{display:none;}
.fa-file-pdf{color: #F63B3B;}

/* 　緊急のお知らせ
-------------------------------------*/
.urgentNews a[href$=".pdf"]:after {display:none;}
.urgentNews a[href$=".pdf"] dt:after{
    content: "";
    display: inline-block;
    width: 15px;
    height: 17px;
    margin-left: 5px;
    background-image: url(../img/contents/ico_pdf.png);
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    vertical-align:middle;
}

/* 　topicsInfo の場合
-------------------------------------*/
.topicsInfo a[href$=".pdf"]:after{display: none;}
.topicsInfo a[href$=".pdf"] .entry .text:after{
    content: "";
    display: inline-block;
    width: 15px;
    height: 17px;
    margin-left: 5px;
    background-image: url(../img/contents/ico_pdf.png);
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
}

/* ====================================================
    外部リンクアイコン
==================================================== */
.externalLink:after{
    content: "";
    width: 15px;
    height: 12px;
    background-image: url(../img/contents/ico_link_g.svg);
    background-size: 100%;
    display: inline-block;
    margin-left: 3px;
}

/* ====================================================
    リンクテキスト
==================================================== */
.arrowLinkText{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    font-weight: bold;
    color: #151D35;
    text-decoration: none;
    padding-bottom: 0.25em;
}
.arrowLinkText::before{
    content: "";
    left: 0;
    bottom: 0;
    position: absolute;
    height: 2px;
    background: #009944;
  }
  .arrowLinkText:after{
    content: "";
    display: inline-block;
    vertical-align: bottom;
    margin-left: 0.75em;
    background-image: url(../img/contents/arrow_gradation.svg);
    background-repeat: no-repeat;
  }
  
@media print, screen and (min-width: 768px) {
    .arrowLinkText{font-size: 1.5rem;}
    .arrowLinkText::before{width: calc(100% - 40px);}
    .arrowLinkText:after{width: 27px; height: 27px; background-size: 27px 27px;}
  }
  @media screen and (max-width: 767px) {
    .news .tabContents{padding-bottom: 0;}
    .top-newsttl .boldTitle{margin-bottom: 0.5em;}
    .arrowLinkText{font-size: 1.4rem;}	
    .arrowLinkText::before{width: calc(100% - 25px);}
    .arrowLinkText:after{width: 20px; height: 20px; background-size: 20px 20px;}
  }



/* ====================================================
    borderLinkList
==================================================== */
.borderLinkList{width: 100%;}
.borderLinkList__item{border-bottom: 1px solid #BABED1;}
.borderLinkList__item:first-child{border-top: 1px solid #BABED1;}
.borderLinkList__item a{
    display: block;
    width: 100%;
    padding: 0.75em 1em;
    font-size: 1.6rem;
    background-image: url(../img/contents/share/ico-arrow2.svg);
    background-position: calc(100% - 1em) 50%;
    background-repeat: no-repeat;
    color: #151D35;
    text-decoration: none;
}


/* ######################################################################################

　イメージボックス：imgBox

###################################################################################### */
.imgBox {margin-bottom: 1.5em;}
.imgBox a:hover img{opacity: .8;}


@media print, screen and (max-width: 767px) {
.imgBox img{width: 100%;}
}
	
/* ######################################################################################

　ハンバーガーメニュー：meanMenu

###################################################################################### */

/* ====================================================
　PCでは非表示
==================================================== */
@media print, screen and (min-width: 768px) {
    .meanMenu {display:none !important;}
    .meanMenuAcc.mean-nav{display: none;}
	
/* ヘッダ固定：固定にしない場合は削除
-------------------------------------*/	
	.headerBar{position:fixed;z-index: 99997;right: 0;}
	.header{position:fixed;z-index: 99996;padding-top: 39px;}
	 #ContentsBase{padding-top: 120px;}


}

@media screen and (max-width: 767px) {
/* ====================================================
　3＠デフォルト
==================================================== */
.mean-container .mean-nav ul li a.mean-expand {background:none !important; border:none !important;}
.mean-container .mean-bar {padding:0; min-height:0; }
.header {width:100%;}
.mean-container .mean-bar {height:0;}


/* ヘッダ固定：固定にしない場合は削除
-------------------------------------*/
.header,
.mean-container .mean-bar {position:fixed;}
    
.mean-container .mean-nav ul li a {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
}
.mean-container .mean-nav ul li a:not(.mean-expand) {width:100% !important;}

/* ====================================================
　meanMenuAcc表示
==================================================== */
    .meanMenuAcc.mean-nav > ul {display:block !important;}
    .mean-nav > ul li.acc {display: none;}
    .meanMenuAcc.mean-nav > ul li.acc {display: block;}
    .meanMenuAcc.mean-nav > ul li.top {display: none;}

 
    
/* 重なり順 DF
-------------------------------------*/
.header   {z-index: 9999;}
.mean-bar {z-index:10000;}

/* ＋・－　スタイル DF
-------------------------------------*/
.mean-container .mean-nav ul li a.mean-expand {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
    padding: 0px !important;
}
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
    content:"";
    display:block;
    position:relative;
}
.mean-container .mean-nav ul li a.mean-expand:after {transform:rotate(90deg);}
.mean-container .mean-nav ul li a.mean-expand.mean-clicked:after {display:none;}

/* MENU・CLOSE　スタイル DF
-------------------------------------*/
.mean-container a.meanmenu-reveal em {
    display:block;
    position:absolute;
    width:100%;
    text-indent:0;
    text-align:center;
    font-weight:normal;
    font-style:normal;
    color:#009935;
    font-size:1.1rem;
}

/* *********************************
　　　ここから設定：meanMenu
********************************* */

/* ====================================================
　ヘッダスタイル
==================================================== */
.header .header_contents {
    position:relative;
    height:50px;
}
.mean-container .mean-nav {
    margin-top:68px;
	/* ヘッダ高さ　common.js で[meanNavPush]にヘッダの高さを設定 */
    border-bottom: 1px solid #ddd
} 
.mean-container .mean-nav:not(.meanMenuAcc){
    overflow-y: scroll;
    max-height: calc(100vh - 68px);
}

/* ====================================================
　≡ボタン
==================================================== */
.mean-container a.meanmenu-reveal {
    width: 68px;
    height: 68px;
    padding: 0;

}
.mean-nav ul li li > a:not(fitst-of-child){opacity:1 !important;}


/* ====================================================
　≡スタイル
==================================================== */
.mean-container a.meanmenu-reveal span {
    position:relative;
    top:20px;         /* ≡の位置調整 */
    width:55%;        /* ≡の長さ */
	background: #009935; /* ≡の色 */
	height: 2px;      /* ≡の太さ */
	margin:6px auto;  /* ≡の間隔 */
}
.mean-container a.meanmenu-reveal span:nth-child(1) {width:26px;}
.mean-container a.meanmenu-reveal span:nth-child(2) {width:26px;}
.mean-container a.meanmenu-reveal span:nth-child(3) {width:16px; margin-right: 22px;}

/* ====================================================
　×スタイル
==================================================== */
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(1) {transform:rotate(45deg);}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(2) {opacity:0;}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(3) {transform:rotate(-45deg);width:26px;}
.mean-container a.meanmenu-reveal.meanclose span {top: 27px;} /* 位置調整 */

/* ====================================================
　MENU・CLOSE　スタイル
==================================================== */
.mean-container a.meanmenu-reveal em {
    bottom:5px;
    color:#009935;
    font-size:1.0rem;
	font-weight: bold;
}

/* ====================================================
　メニュースタイル
==================================================== */
.mean-bar .mean-nav ul {padding: 5% 5%;}
.mean-bar .mean-nav ul li ul{padding: 0;}	
	
.mean-container .mean-nav {background:#ffffff; }/* メニュー色 */
.mean-container .mean-nav ul li a {
    position: relative;
    border-top: 1px solid #F2F4F5 !important;      /* 区切り線上 */
    border-bottom: 1px solid #F2F4F5 !important;   /* 区切り線下 */
    padding:0.7em 55px 0.7em 10px !important; /* ボタン余白 */
    color:#111;                                 /* 文字色 */
    font-weight: bold;
    font-size: 1.5rem;
}
.mean-container .mean-nav ul:first-child li:first-child a{border-top: none;}
.mean-container .mean-nav ul li li a{font-size: 1.3rem; font-weight: normal; background: #F8F8F8;}
.meanMenuAcc.mean-nav ul li.mean-last a {border-bottom: 1px solid #000;}
.mean-container .meanMenuAcc.mean-nav {margin-top: 30px; margin-bottom: 50px;}
	
/* 背景 緑色 */
.mean-container .mean-nav ul li.green{background: #009935; color:#fff;}
.mean-container .mean-nav ul li.green a{ color:#fff;font-weight: normal;font-size: 1.4rem;padding-left:0.9em!important;}

   
/*　背景 黒　*/
.mean-container .mean-nav ul li.black{background: #333333; color:#fff;}
.mean-container .mean-nav ul li.black.first{margin: 0;}
.mean-container .mean-nav ul li.black a{ color:#fff;font-weight: normal;font-size: 1.4rem;padding-left:0.9em!important;}
.mean-container .mean-nav:not(.meanMenuAcc) ul li.black:last-child{margin: 0 0 4em;}
.mean-container .mean-nav.meanMenuAcc ul li.black:last-child{margin: 0 0 1em;}
    
    
/* 一番下の下線 */
.mean-container .meanMenuAcc.mean-nav{border-bottom: 1px solid #F2F4F5; padding: 0 5px;}


/* ====================================================
　mean-menu内sns
==================================================== */
.mean-container .mean-nav ul li.m-sns{text-align: center;}
.mean-container .mean-nav ul li.m-sns a.mean-expand{display: none;}	
	
/* ====================================================
　＋・－　スタイル
==================================================== */
.mean-container .mean-nav ul li a.mean-expand {
    width: 100%;
    height: 50px;
}
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
    position: absolute;
    right: 18px;
    background:#555;   /* ＋－の色 */
    width:12px;         /* ＋－の間隔 */
    height:1px;        /* ＋－の太さ */
    margin:5px auto;   /* ＋－の感覚 */
}
    
.mean-container .meanMenuAcc ul li a.mean-expand:before,
.mean-container .meanMenuAcc ul li a.mean-expand:after{
    background: #333;
}
    
.mean-container .mean-nav ul li a.mean-expand:before {top:40%;} /* －の位置調整 */
.mean-container .mean-nav ul li a.mean-expand:after {top:40%;}  /* ｜の位置調整 */


/* ====================================================
    アイコン
==================================================== */
.mean-container .mean-nav .ico a{position: relative; font-weight: normal;}
.mean-container .mean-nav ul li.ico a{font-size: 1.4rem;}


.mean-container .mean-nav .ico.arrow a:after{
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: rotate(45deg);
    position: absolute;
    top: 22px;
    right: 22px;
}




/* ====================================================
    footerでは言語切り替え非表示
==================================================== */
.meanMenuAcc ul li.black{display: none;}


}


/* ######################################################################################

    flexslider

###################################################################################### */

.flex-direction-nav,
.flex-control-nav{display:none !important;}

.flexslider1,.flexslider2{width:50%; float:left;}

.flexslider1 li img,
.flexslider2 li img{
    width: calc(50% * 2); /* IE11では width:100%; とすると効かない */
    object-fit: cover;
}

@media print, screen and (min-width: 768px) {
    .flexslider1 li img,.flexslider2 li img{height: 560px;}

}
@media screen and (max-width: 767px) {
    .flexslider1 li img,.flexslider2 li img{height: 300px;}
}


/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */

/* ====================================================
　デフォルト
==================================================== */

.slick-slide img {
    width: 100%;
}

/* スライド同士の間隔 DF
-------------------------------------*/
.slick-slide {margin: 0px 0; }

/* 左右ボタンスタイル DF
-------------------------------------*/
.slick-prev,
.slick-next {
    z-index:10;
    width:auto;
    height:auto;
}
.slick-prev {left: 15px;}
.slick-next {right: 15px;}
.slick-prev:before,
.slick-next:before {
    font-family: FontAwesome;
    opacity: .75;
}
/* ====================================================
　左右ボタンスタイル：＜＞
==================================================== */
.slick-prev:before,
.slick-next:before {color: #000000;}    /* ＜＞ 色 */
.slick-prev::before {content:"\f104";}    /* ＜ 形状 */
.slick-next::before {content:"\f105";}    /* ＞ 形状 */

@media print, screen and (min-width: 768px) {
    .slick-prev:before,
    .slick-next:before {font-size: 40px;}    /* ＜＞ サイズ */
}
@media screen and (max-width: 767px){
    .slick-prev:before,
    .slick-next:before {font-size: 30px;}    /* ＜＞ サイズ */
}

/* 黒丸ボタンスタイル DF
-------------------------------------*/
.slick-dots {bottom:-1.5em;}
.slick-dots li,
.slick-dots li button,
.slick-dots li button::before {
    display:inline-block;
    padding:0;
    width:auto;
    height:auto;
    line-height:1;
}
.slick-dots li button {display:block;}

/* ====================================================
　黒丸ボタンカスタマイズ：長方形横
==================================================== */
.dotteSolid .slick-dots li {margin:0 4px;}                           /* ●の間隔 */
.dotteSolid .slick-dots li button:before {display:none;}             /* ●の非表示 */
.dotteSolid .slick-dots li button {width: 6px;height:6px; border-radius:0%;}          /* ボタンの形状 */
.dotteSolid .slick-dots li button {background:#c1c1c1;}              /* ● DFの色 */
.dotteSolid .slick-dots li.slick-active button {background:#000000;} /* ● active色 */


/* ====================================================
　センター配置：画面幅に応じて左右が見える。
  767以下でレスポンシブ対応（1枚表示）
==================================================== */
@media print, screen and (min-width: 768px) {
.centerRes.slickSlider .slick-slide{
    width:1060px !important;    /* ※PCの時の画像サイズ指定 */
}
}


/* ######################################################################################

　パンくずリスト：widget.css_topicPath

###################################################################################### */
    .topicPath {
        display: block; 
        clear: both;
        width: 100%;
        margin: 0 auto;
        padding-top: 20px;
        line-height: 1;
        text-align: left;
    }
    .topicPath ol li {display: inline; line-height: 1.5;}
    .topicPath ol li:not(:first-child):before {
    content: "";
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    width: 0.55em;
    height: 0.55em;
    background: url(../img/contents/share/ico_arrow_r_gray.svg) no-repeat;
    background-size: contain;
    background-position: center;
    }
    
    .topicPath ol li a {
        color: #009935;
        text-decoration: none;
    }

    .topicPath .home a{
        position: relative;
        color: #009935;
    }
    .topicPath li,
    .topicPath a,
    .topicPath span {font-size: 1.2rem;}
    .topicPath ol li a:hover { text-decoration: underline; }
@media print, screen and (min-width: 768px) {
	.topicPath {
		width: 1260px;
        padding-top: 20px;
        padding-left: 70px;
        padding-right: 10px;
		}
	.topicPath ol li:not(:first-child):before {padding: 0 0.75em 0 0.5em;}

}
@media print, screen and (min-width: 1300px) {
	.topicPath {padding-left: 50px;}
}
@media screen and (max-width: 767px) {
		.topicPath {
		max-width: 100%;
		overflow: hidden;
        padding: 15px 0 0 15px;
		max-height: 33px;
		}		
		.topicPath ol li:not(:first-child):before {padding: 0 0.5em 0 0.5em;}

}

/* ######################################################################################

    YouTube レスポンシブ対応

###################################################################################### */
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .youtube{
        position: relative;
        width: 100%;
        padding-top: 56.3%;
    }
    .youtube iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ######################################################################################

　ボタン　button

###################################################################################### */

/* ====================================================
　基本スタイル
==================================================== */
.button {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}

@media print, screen and (min-width: 768px) {
	.button{ padding: 1.4em 0.8em; min-width: 260px;}
	.button.large{ padding: 1.4em 3em 1.5em ; min-width: 640px;}
	.button.en{ padding: 0.8em 0 0.7em 0; min-width: 260px;}
    .button:not(.disabled):hover {opacity:0.85;}
    .button:not(.disabled):active {box-shadow:none; top:1px;}
}
@media print, screen and (max-width: 767px) {
	.button{  padding: 18px 15px; min-width: 70%;}
	.button.large{   padding: 1.2em 0 1.3em; min-width: 100%;}
    .button:not(.disabled):active {background: #eeeeee; top:1px;}
}

/* ====================================================
    丸ボタン
==================================================== */
.button.round{border-radius: 4em;}
.button.square{border-radius: 0.3em;}




/* ====================================================
    白ボタン
==================================================== */
.button.white{
    border:1px solid #111;
    color: #111;
}
  .button.white:hover{
    border:1px solid #111;
    background: #111;
    color: #fff;
    opacity: 1;
}
/* ====================================================
    白ボーダーボタン
==================================================== */
.button.whitebd{
    border:1px solid #fff;
    color: #fff;
}
  .button.whitebd:hover{
    border:1px solid #fff;
    background: #fff;
    color: #111;
    opacity: 1;
}

/* ====================================================
　緑ボタン
==================================================== */
.button.green {
	border:1px solid #009935;
    background: #009935;
    color: #ffffff;
	font-weight: bold;
	line-height: 1.2;
}
.button.green:hover{
    border:1px solid #009935;
    background: #fff;
    color: #111;
    opacity: 1;
}


/* ====================================================
　オレンジボタン
==================================================== */
.button.orange {
	border:1px solid #ff5a27;
    background: #ff5a27;
    color: #ffffff;
	font-weight: bold;
	line-height: 1.2;
}
.button.orange:hover{
    border:1px solid #ff5a27;
    background: #fff;
    color: #111;
    opacity: 1;
}


/* ====================================================
　赤ボタン
==================================================== */
.button.red {
	border:1px solid #CC0000;
    background: #CC0000;
    color: #ffffff;
	font-weight: bold;
}
.button.red:hover{
    border:1px solid #CC0000;
    background: #fff;
    color: #111;
    opacity: 1;
}

/* ====================================================
　紫ボタン
==================================================== */
.button.purple {
	border:1px solid #833C9D;
    background: #833C9D;
    color: #ffffff;
	line-height: 1.2;
}
.button.purple:hover{
    border:1px solid #833C9D;
    background: #fff;
    color: #111;
    opacity: 1;
}

.button.purple2 {
	border:1px solid #A367B9;
    background: #A367B9;
    color: #ffffff;
	line-height: 1.2;
}
.button.purple2:hover{
    border:1px solid #A367B9;
    background: #fff;
    color: #111;
    opacity: 1;
}

/* ====================================================
　スカイブルー
==================================================== */
.button.skyBlue {
	border:1px solid #59B1CC;
    background: #59B1CC;
    color: #ffffff;
	line-height: 1.2;
}
.button.skyBlue:hover{
    border:1px solid #59B1CC;
    background: #fff;
    color: #111;
    opacity: 1;
}

/* ====================================================
　ピンク
==================================================== */
.button.pink {
	border:1px solid #E00073;
    background: #E00073;
    color: #ffffff;
	line-height: 1.2;
}
.button.pink:hover{
    border:1px solid #E00073;
    background: #fff;
    color: #111;
    opacity: 1;
}
/* ====================================================
　青　word等
==================================================== */
.button.blue {
	border:1px solid #185ABD;
    background: #185ABD;
    color: #ffffff;
	line-height: 1.2;
}
.button.blue:hover{
    border:1px solid #185ABD;
    background: #fff;
    color: #111;
    opacity: 1;
}



/* ====================================================
　黒ボタン
==================================================== */
.button.black {
	border:1px solid #000000;
    background: #000000;
    color: #ffffff;
}
.button.black:hover{
    border:1px solid #999;
    background: #999;
    color: #111;
    opacity: 1;
}

/* ====================================================
　緑枠・紫枠
==================================================== */
.button.greenbd {
	border:1px solid #009935;
    background: #ffffff;
    color: #111;
}
.button.greenbd:hover{
	border:1px solid #009935;
    background: #009935;
    color: #ffffff;
    opacity: 1;
}
.button.purplebd {
	border:1px solid #833C9D;
    background: #ffffff;
    color: #111;
}
.button.purplebd:hover{
	border:1px solid #833C9D;
    background: #833C9D;
    color: #ffffff;
    opacity: 1;
}

/* ====================================================
　グレーボタン/グレーアウト
==================================================== */
.button.gray {
	border:1px solid #dbdbdb;
    background: #dbdbdb;
    color: #a0a0a0;
}

/* ====================================================
　日本語+英語ボタン
==================================================== */
.button.greenbd.en {color: #009935;}
.button.en {font-size: 1.5rem; font-weight: bold; min-width: 260px;}
.button.en.long{min-width: 340px;}
.button.en span {
    display: block;
    margin-top: 0.25em;
    font-size: 1.1rem;
    }
.button.ico.before.en:before {
    content:"";
    position: absolute;
    background: url(../img/contents/share/ico-arrow_down.svg) no-repeat;
    width: 20px;
    height: 20px;
    left: 1.2em;
    top: 30%;
    }
.button.greenbd.en:hover {color: #FFF;}
.button.ico.before.en:hover:before {background: url(../img/contents/share/ico-arrow_down_wh.svg) no-repeat;}

@media print, screen and (max-width: 767px) {
    .sunflex .buttonBox{margin: 0 0.5em;}
}

.button.ico.before.en.right:before,
.button.ico.before.en.right:hover:before {
    background-image: url(../img/contents/share/ico-greenArrow.svg);
    background-size: 100%;
}



/* ====================================================
　ボタンサイズ
==================================================== */
.button.small  {padding:0.4em 1em;}
.button.midium {padding:0.50em 1.5em;}
.button.big    {padding:0.75em 2.75em;}
.button.big2 {padding: 1em 5em;}

@media print, screen and (min-width: 768px) {
    .button.smallNarrow {padding: 1.5em 0.5em;}
}
@media screen and (max-width: 767px) { /* スマホ */
    .button.smallNarrow {padding: 1em 0.5em;}
}


/* ====================================================
　xs以下でブロックボタン
==================================================== */
@media print, screen and (max-width: 767px) {
    .button.xs-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}
/* ====================================================
　sm以下でブロックボタン
==================================================== */
@media print, screen and (max-width: 991px) {
    .button.sm-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}

/* ====================================================
　md以下でブロックボタン
==================================================== */
@media screen and (max-width: 1199px) {
    .button.md-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}
/* ====================================================
　lg以下でブロックボタン
==================================================== */
@media screen and (max-width: 9999px) {
    .button.lg-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}

/* ====================================================
　矢印・アイコン付き　→
==================================================== */
/* アイコン
-------------------------------------*/
.button.ico.before:before {
    content:"";
    width:12px;
    height:8px;
    background-size:contain !important;
    position: absolute;
    right: 1em;
    top: 42%;
}
.button.ico.after:after {
    content:"";
    width:12px;
    height:8px;
    background-size:contain !important;
    position: absolute;
    right: 1em;
    top: 42%;
}


/* →　矢印 */
.button.ico.next:after   {background:url(../img/contents/share/ico-arrow.svg);}
.button.ico.next:hover::after   {background:url(../img/contents/share/ico-arrow-white.svg);}

/* →　矢印　円 */
.button.ico.next2.after{padding-left: 3em; padding-right: 3em;}
.button.ico.next2.after:after{
    width: 20px;
    height: 20px;
    background-size: 20px;
    right: auto;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
}
.button.ico.next2.after:after  {background:url(../img/contents/share/ico-greenArrow.svg);}
.button.ico.next2.after:hover::after   {background:url(../img/contents/share/ico-greenArrow-hover.svg);}

/* →　矢印　白赤円 */
.button.ico.next3.after{padding-left: 3em; padding-right: 3em;}
.button.ico.next3.after:after{
    width: 20px;
    height: 20px;
    background-size: 20px;
    top: 50%;
    margin-left: 0.5em;
    transform: translateY(-50%);
}
@media print, screen and (min-width: 768px) {
	.button.ico.next3.after:after{   right: auto;}
}

@media print, screen and (max-width: 767px) {
.button.ico.next3.after:after{   right: 1em;}	
}
.button.ico.next3.after:after {background:url(../img/contents/share/ico-whiteArrow.svg);}
.button.ico.next3.after:hover::after   {background:url(../img/contents/share/ico-whiteArrow-hover.svg);}

/* →　矢印　白円 */
.button.ico.next4.before{padding-left: 3em; padding-right: 2em;}
.button.ico.next4.before:before{
    width: 20px;
    height: 20px;
    background-size: 20px;
    top: 50%;
    margin-left: 0.5em;
    transform: translateY(-50%);
    background:url(../img/contents/share/ico-whiteArrow.svg);
}
@media print, screen and (min-width: 768px) {
    .button.ico.next4.before:before{ right: auto; left: 1em;}
}
@media print, screen and (max-width: 767px) {
    .button.ico.next4.before:before{ right: auto; left: 0.75em;}
}

.button.ico.next4.green.before:hover:before{background:url(../img/contents/share/ico-greenArrow.svg);}
.button.ico.next4.skyBlue.before:hover:before{background:url(../img/contents/share/ico-skyBlueArrow.svg);}
.button.ico.next4.purple2.before:hover:before{background:url(../img/contents/share/ico-purple2Arrow.svg);}


/* ↓　矢印　円 */
.button.ico.down.after{padding-left: 3em; padding-right: 3em;}
.button.ico.down.after:after{
    width: 20px;
    height: 20px;
    background-size: 20px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

.button.ico.down.after:after  {background:url(../img/contents/share/ico-greenDown.svg);}
.button.ico.down.after:hover::after   {background:url(../img/contents/share/ico-greenDown-hover.svg);}

/* 外部リンク */
.button.ico.before.before.link:before,
.button.ico.after.after.link:after {
    width: 1.3em;
    height: 1.3em;
    background:url(../img/contents/index/ico-link_white.png);
    background-repeat: no-repeat;
}

/* ====================================================
　操作不可
==================================================== */
.button.disabled,
.button[disabled]{
    box-shadow: none;
    cursor: no-drop;
    background: #DBDBDB!important;
    border: 1px solid #DBDBDB!important;
    color: #A0A0A0!important;
    pointer-events: none;
}


/* ######################################################################################

　ボタンボックス（ページ遷移）　buttonBox

###################################################################################### */

/* ====================================================
　Grid System のボタンをblockに
==================================================== */
.row > * >.button {display:block; width:100%;}


/* ====================================================
　基本スタイル
==================================================== */
@media print, screen and (min-width: 768px) {
    .buttonBox { text-align: center; margin-bottom: 1em; }
}
@media screen and (max-width: 767px) {
    .buttonBox { text-align: center; margin-bottom: 1em;}
}

.buttonBox p { text-align: center; }
.buttonBox.center .row {
    display: inline-block;
    width: 100%;
    max-width: 500px;
}
.buttonBox.center.single .row { max-width: 384px; }

/* ====================================================
　ブロックボタンは上下に余白を作る
==================================================== */
@media print, screen and (max-width: 767px) {
    .buttonBox > .row > .col-xs-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}
@media print, screen and (max-width: 991px) {
    .buttonBox > .row > .col-sm-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}
@media screen and (max-width: 1199px) {
    .buttonBox > .row > .col-md-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
    }
@media screen and (max-width: 9999px) {
    .buttonBox > .row > .col-lg-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}

/* ====================================================
　columnButton1
==================================================== */
.columnButton1{display: block; justify-content: inherit;}

@media print, screen and (min-width: 768px) {
    .columnButton1 > li{width: 48%; margin: auto;}
    .columnButton1 .button{display: block; width: 100%; padding-top: 1.25em; padding-bottom: 1.25em; font-size: 1.6rem;}
}
@media screen and (max-width: 767px) {
    .columnButton1 > li{width: 100%;}
    .columnButton1 > li + li{margin-top: 0.5em;}
    .columnButton1 .button{display: block; width: 100%; padding-top: 1.25em; padding-bottom: 1.25em;}
}
/* ====================================================
　columnButton2
==================================================== */
.columnButton2{display: flex; justify-content: inherit;}

@media print, screen and (min-width: 768px) {
    .columnButton2 > li{width: 48%; margin-right: 1em;}
    .columnButton2 .button{display: block; width: 100%; padding-top: 1.25em; padding-bottom: 1.25em; font-size: 1.6rem;}
}
@media screen and (max-width: 767px) {
    .columnButton2 > li{width: 100%;}
    .columnButton2 > li + li{margin-top: 0.5em;}
    .columnButton2 .button{display: block; width: 100%; padding-top: 1.25em; padding-bottom: 1.25em;}
}

/* ====================================================
　columnButton3
==================================================== */
.columnButton3{display: flex; justify-content: inherit;}

@media print, screen and (min-width: 768px) {
    .columnButton3 > li{width: 31%; margin-right: 1em;}
    .columnButton3 .button{display: block; width: 100%; padding-top: 1.5em; padding-bottom: 1.5em; font-size: 1.6rem;}
}
@media screen and (max-width: 767px) {
    .columnButton3 > li{width: 100%;}
    .columnButton3 > li + li{margin-top: 0.5em;}
    .columnButton3 .button{display: block; width: 100%; padding-top: 1.25em; padding-bottom: 1.25em;}
}



/* ######################################################################################

    .grayButtonBox（グレーの角丸ボタン　hover緑文字　横並び）

###################################################################################### */
.grayButtonBox > li > a{padding: 1em 1.5em;}

/*  inlineで横並びにする
-------------------------------------*/
.grayButtonBox.inline {font-size: 0;}
.grayButtonBox.inline > li{display: inline-block; font-size: 1.5rem; margin-right: 5px;}
.grayButtonBox.inline > li:last-child{margin-right: 0;}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .grayButtonBox.inline > *{margin-bottom: 5px;}
}

/* ######################################################################################

    .grayBgLinkBox（グレーの背景　リンクボックス　左に矢印アイコン付き）

###################################################################################### */
.grayBgLinkBox{background: #f4f5f7; padding: 1em 2em;}

.grayBgLinkBox a:hover{text-decoration: underline;}
.grayBgLinkBox p:last-child{margin: 0;}

/* アイコン共通 */
.grayBgLinkBox .arrowRight {display:inline-block; vertical-align:top;}
.grayBgLinkBox .arrowRight:before,
.grayBgLinkBox .arrowRight:after,
.grayBgLinkBox .pdf:after{
    content: "";
    position: absolute;
}

/*　矢印アイコン　*/
.grayBgLinkBox .arrowRight:before{
    width: 18px;
    height: 18px;
    top: 0;
    left: 0;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #d0d0d0;
}
.grayBgLinkBox .arrowRight:after{
    width: 5px;
    height: 5px;
    top: 6px;
    left: 5px;
    border-right: 1px solid #4d5259;
    border-top: 1px solid #4d5259;
    transform: rotate(45deg);
}

@media print, screen and (min-width: 768px) {
    .grayBgLinkBox{padding: 1.5em 2em; margin-bottom: 2em;}
	.grayBgLinkBox a{text-decoration: none; position: relative;}
}
@media screen and (max-width: 767px) {
    .grayBgLinkBox{padding: 1em; margin-bottom: 1.5em;}
	.grayBgLinkBox a{text-decoration: none; position: relative;}
}





/* ######################################################################################

    記事下のボタン　（前へ　1 2 3 4　次へ）

###################################################################################### */
.listButton{text-align: center; clear: both;}
.listButton li{display: inline-block;}

.listButton li.past a,.listButton li.past span,
.listButton li.next a,.listButton li.next span{padding: 0.8em 1.5em;}
.listButton li.past span,.listButton li.next span,
.listButton li.past span:hover,.listButton li.next span:hover{background-color: #dedede; cursor:auto;}

.listButton li.number span,
.listButton li.number a{
    padding: 0.3em 0.6em;
    border: 1px solid #c4c2ba;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.07);
    text-decoration: none;
}
.listButton li.number a:hover,
.listButton li.number span{
    background-color: #009935;
    color: #fff;
}

@media print, screen and (min-width: 768px) {
    .listButton{margin-top: 40px; margin-bottom: 20px;}
    .listButton li.past{margin-right: 1.5em;}
    .listButton li.next{margin-left: 1.5em;}
}
@media screen and (max-width: 767px) {
    .listButton{margin-top: 2em; margin-bottom: 1em;}
    .listButton li.past{margin-right: 0.5em;}
    .listButton li.next{margin-left: 0.5em;}
}

/* ######################################################################################

　リスト

###################################################################################### */
.numList > li{position: relative; padding-left: 1.75em;}
.numList > li:before{position: absolute; top: 0; left: 0;}

.numList > li:nth-child(1):before{content:"1.";}
.numList > li:nth-child(2):before{content:"2.";}
.numList > li:nth-child(3):before{content:"3.";}
.numList > li:nth-child(4):before{content:"4.";}
.numList > li:nth-child(5):before{content:"5.";}
.numList > li:nth-child(6):before{content:"6.";}
.numList > li:nth-child(7):before{content:"7.";}
.numList > li:nth-child(8):before{content:"8.";}
.numList > li:nth-child(9):before{content:"9.";}
.numList > li:nth-child(10):before{content:"10.";}
.numList > li:nth-child(11):before{content:"11.";}
.numList > li:nth-child(12):before{content:"12.";}
.numList > li:nth-child(13):before{content:"13.";}
.numList > li:nth-child(14):before{content:"14.";}
.numList > li:nth-child(15):before{content:"15.";}
.numList > li:nth-child(16):before{content:"16.";}
.numList > li:nth-child(17):before{content:"17.";}
.numList > li:nth-child(18):before{content:"18.";}
.numList > li:nth-child(19):before{content:"19.";}
.numList > li:nth-child(20):before{content:"20.";}
.numList > li:nth-child(21):before{content:"21.";}

.customMarkList > li{position: relative; padding-left: 2em;}
.customMarkList > li .mark{
    position: absolute;
    top: 0;
    left: 0
}
@media print, screen and (min-width: 768px) {
    .customMarkList > li{padding-left: 2em;}
}
@media screen and (max-width: 767px) {
    .customMarkList > li{padding-left: 1.25em;}
}





.bracketsNumList > li{position: relative; padding-left: 2.5em;}
.bracketsNumList > li:before{position: absolute; top: 0; left: 0;}
.bracketsNumList > li:nth-child(1):before{content:"（1）";}
.bracketsNumList > li:nth-child(2):before{content:"（2）";}
.bracketsNumList > li:nth-child(3):before{content:"（3）";}
.bracketsNumList > li:nth-child(4):before{content:"（4）";}
.bracketsNumList > li:nth-child(5):before{content:"（5）";}
.bracketsNumList > li:nth-child(6):before{content:"（6）";}
.bracketsNumList > li:nth-child(7):before{content:"（7）";}
.bracketsNumList > li:nth-child(8):before{content:"（8）";}
.bracketsNumList > li:nth-child(9):before{content:"（9）";}
.bracketsNumList > li:nth-child(10):before{content:"（10）";}
.bracketsNumList > li:nth-child(11):before{content:"（11）";}
.bracketsNumList > li:nth-child(12):before{content:"（12）";}
.bracketsNumList > li:nth-child(13):before{content:"（13）";}
.bracketsNumList > li:nth-child(14):before{content:"（14）";}
.bracketsNumList > li:nth-child(15):before{content:"（15）";}
.bracketsNumList > li:nth-child(16):before{content:"（16）";}
.bracketsNumList > li:nth-child(17):before{content:"（17）";}
.bracketsNumList > li:nth-child(18):before{content:"（18）";}
.bracketsNumList > li:nth-child(19):before{content:"（19）";}
.bracketsNumList > li:nth-child(20):before{content:"（20）";}
.bracketsNumList > li:nth-child(21):before{content:"（21）";}





.circlenumList > li{position: relative; padding-left: 1.5em;}
.circlenumList > li:before{position: absolute; top: 0; left: 0;}

.circlenumList > li:nth-child(1):before{content:"①";}
.circlenumList > li:nth-child(2):before{content:"②";}
.circlenumList > li:nth-child(3):before{content:"③";}
.circlenumList > li:nth-child(4):before{content:"④";}
.circlenumList > li:nth-child(5):before{content:"⑤";}
.circlenumList > li:nth-child(6):before{content:"⑥";}
.circlenumList > li:nth-child(7):before{content:"⑦";}
.circlenumList > li:nth-child(8):before{content:"⑧";}
.circlenumList > li:nth-child(9):before{content:"⑨";}
.circlenumList > li:nth-child(10):before{content:"⑩";}




.asteriskNumList > li{position: relative; padding-left: 2.5em;}
.asteriskNumList > li:before{position: absolute; top: 0; left: 0;}

.asteriskNumList > li:nth-child(1):before{content:"※1.";}
.asteriskNumList > li:nth-child(2):before{content:"※2.";}
.asteriskNumList > li:nth-child(3):before{content:"※3.";}
.asteriskNumList > li:nth-child(4):before{content:"※4.";}
.asteriskNumList > li:nth-child(5):before{content:"※5.";}
.asteriskNumList > li:nth-child(6):before{content:"※6.";}
.asteriskNumList > li:nth-child(7):before{content:"※7.";}
.asteriskNumList > li:nth-child(8):before{content:"※8.";}
.asteriskNumList > li:nth-child(9):before{content:"※9.";}
.asteriskNumList > li:nth-child(10):before{content:"※10.";}
.asteriskNumList > li:nth-child(11):before{content:"※11.";}
.asteriskNumList > li:nth-child(12):before{content:"※12.";}
.asteriskNumList > li:nth-child(13):before{content:"※13.";}
.asteriskNumList > li:nth-child(14):before{content:"※14.";}
.asteriskNumList > li:nth-child(15):before{content:"※15.";}


.asteriskNumList2 > li{position: relative; padding-left: 2.5em;}
.asteriskNumList2 > li:before{position: absolute; top: 0; left: 0;}

.asteriskNumList2 > li:nth-child(1):before{content:"※1";}
.asteriskNumList2 > li:nth-child(2):before{content:"※2";}
.asteriskNumList2 > li:nth-child(3):before{content:"※3";}

/*英語*/
.en .asteriskNumList > li:nth-child(1):before{content:"*1.";}
.en .asteriskNumList > li:nth-child(2):before{content:"*2.";}
.en .asteriskNumList > li:nth-child(3):before{content:"*3.";}
.en .asteriskNumList > li:nth-child(4):before{content:"*4.";}
.en .asteriskNumList > li:nth-child(5):before{content:"*5.";}
.en .asteriskNumList > li:nth-child(6):before{content:"*6.";}
.en .asteriskNumList > li:nth-child(7):before{content:"*7.";}
.en .asteriskNumList > li:nth-child(8):before{content:"*8.";}
.en .asteriskNumList > li:nth-child(9):before{content:"*9.";}
.en .asteriskNumList > li:nth-child(10):before{content:"*10.";}
.en .asteriskNumList > li:nth-child(11):before{content:"*11.";}
.en .asteriskNumList > li:nth-child(12):before{content:"*12.";}
.en .asteriskNumList > li:nth-child(13):before{content:"*13.";}
.en .asteriskNumList > li:nth-child(14):before{content:"*14.";}
.en .asteriskNumList > li:nth-child(15):before{content:"*15.";}


.dotList > li {
    padding-left: 1em;
    text-indent: -1em;
}
.dotList > li:before {
    content: "・";
    font-size: 1.3rem;
    margin-right: 0.5em;
}

.asteriskList > li {
    padding-left: 1em;
    text-indent: -1em;
}
.asteriskList > li:before {
    content: "※";
}

.en .asteriskList > li:before {
    content: "*";
    margin-right: 0.5em;
}

.lineList > li {
    padding-left: 1em;
    text-indent: -1em;
}
.lineList > li:before {
    content: "–";
    margin-right: 0.5em;
}

/* =======================================================
    alphabetList
========================================================== */


.alphabetList > li{position: relative; padding-left: 1.5em;}
.alphabetList > li:before{position: absolute; top: 0; left: 0;}

.alphabetList > li:nth-child(1):before{content:"a";}
.alphabetList > li:nth-child(2):before{content:"b";}
.alphabetList > li:nth-child(3):before{content:"c";}
.alphabetList > li:nth-child(4):before{content:"d";}
.alphabetList > li:nth-child(5):before{content:"e";}
.alphabetList > li:nth-child(6):before{content:"f";}
.alphabetList > li:nth-child(7):before{content:"g";}
.alphabetList > li:nth-child(8):before{content:"h";}
.alphabetList > li:nth-child(9):before{content:"i";}
.alphabetList > li:nth-child(10):before{content:"j";}
.alphabetList > li:nth-child(11):before{content:"k";}
.alphabetList > li:nth-child(12):before{content:"l";}
.alphabetList > li:nth-child(13):before{content:"m";}
.alphabetList > li:nth-child(14):before{content:"n";}
.alphabetList > li:nth-child(15):before{content:"o";}

/* =======================================================
    kanaList
========================================================== */


.kanaList > li{position: relative; padding-left: 1.5em;}
.kanaList > li:before{position: absolute; top: 0; left: 0;}

.kanaList > li:nth-child(1):before{content:"ア";}
.kanaList > li:nth-child(2):before{content:"イ";}
.kanaList > li:nth-child(3):before{content:"ウ";}
.kanaList > li:nth-child(4):before{content:"エ";}
.kanaList > li:nth-child(5):before{content:"オ";}
.kanaList > li:nth-child(6):before{content:"カ";}
.kanaList > li:nth-child(7):before{content:"キ";}
.kanaList > li:nth-child(8):before{content:"ク";}
.kanaList > li:nth-child(9):before{content:"ケ";}
.kanaList > li:nth-child(10):before{content:"コ";}
.kanaList > li:nth-child(11):before{content:"サ";}
.kanaList > li:nth-child(12):before{content:"シ";}
.kanaList > li:nth-child(13):before{content:"ス";}
.kanaList > li:nth-child(14):before{content:"セ";}
.kanaList > li:nth-child(15):before{content:"ソ";}




/* =======================================================
    listStyle
========================================================== */
.listStyle{margin: 0 0 2em;}
ul.listStyle{margin-left:0.25em;}
.listStyle li{
    position: relative;
    line-height: 1.4;
}
.listStyle li:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}


@media print, screen and (min-width: 768px) {
    .listStyle li{font-size: 1.6rem;}
}
@media screen and (max-width: 767px){
    .listStyle li{font-size: 1.4rem;}
    .listStyle li + li{margin-top: 1em;}
}

/* ドット
-------------------------------------*/
.listStyle.dot li:before{
    top: 0.45em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #BEC2CC;
}
.listStyle.dot2 li{padding-left: 1em;}
.listStyle.dot2 li:before{
    top: 0.5em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #009935;
}
@media print, screen and (min-width: 768px) {
    .listStyle.dot li{padding-left: 1em;}
    .listStyle.dot li + li{margin-top: 0.5em;}
}
@media screen and (max-width: 767px){
    .listStyle.dot li{padding-left: 0.75em;}
    .listStyle.dot2 li + li{margin-top: 1em;}
}


/* 数字：numberRound
-------------------------------------*/
.listStyle.numberRound li:before{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 0;
    border-radius: 50%;
	border: 1px solid #009935;
    background: #fff;
    color: #009935;
}
@media print, screen and (min-width: 768px) {
    .listStyle.numberRound li{padding-left: 26px;}
    .listStyle.numberRound li + li{margin-top: 0.5em;}
	
    .listStyle.numberRound li:before{
        width: 22px;
        height: 22px;
		font-size: 1.2rem;
    }
}
@media screen and (max-width: 767px){
    .listStyle.numberRound li{padding-left: 22px;}
    .listStyle.numberRound li:before{
        width: 18px;
        height: 18px;
        font-size: 1.2rem;
    }
}

.listStyle.numberRound li:nth-of-type(1):before{content: "1";}
.listStyle.numberRound li:nth-of-type(2):before{content: "2";}
.listStyle.numberRound li:nth-of-type(3):before{content: "3";}
.listStyle.numberRound li:nth-of-type(4):before{content: "4";}
.listStyle.numberRound li:nth-of-type(5):before{content: "5";}
.listStyle.numberRound li:nth-of-type(6):before{content: "6";}
.listStyle.numberRound li:nth-of-type(7):before{content: "7";}
.listStyle.numberRound li:nth-of-type(8):before{content: "8";}
.listStyle.numberRound li:nth-of-type(9):before{content: "9";}
.listStyle.numberRound li:nth-of-type(10):before{content: "10";}
.listStyle.numberRound li:nth-of-type(11):before{content: "11";}
.listStyle.numberRound li:nth-of-type(12):before{content: "12";}
.listStyle.numberRound li:nth-of-type(13):before{content: "13";}
.listStyle.numberRound li:nth-of-type(14):before{content: "14";}
.listStyle.numberRound li:nth-of-type(15):before{content: "15";}
.listStyle.numberRound li:nth-of-type(16):before{content: "16";}
.listStyle.numberRound li:nth-of-type(17):before{content: "17";}
.listStyle.numberRound li:nth-of-type(18):before{content: "18";}
.listStyle.numberRound li:nth-of-type(19):before{content: "19";}
.listStyle.numberRound li:nth-of-type(20):before{content: "20";}
.listStyle.numberRound li:nth-of-type(21):before{content: "21";}
.listStyle.numberRound li:nth-of-type(22):before{content: "22";}
.listStyle.numberRound li:nth-of-type(23):before{content: "23";}
.listStyle.numberRound li:nth-of-type(24):before{content: "24";}
.listStyle.numberRound li:nth-of-type(25):before{content: "25";}
.listStyle.numberRound li:nth-of-type(26):before{content: "26";}
.listStyle.numberRound li:nth-of-type(27):before{content: "27";}
.listStyle.numberRound li:nth-of-type(28):before{content: "28";}
.listStyle.numberRound li:nth-of-type(29):before{content: "29";}
.listStyle.numberRound li:nth-of-type(30):before{content: "30";}
.listStyle.numberRound li:nth-of-type(31):before{content: "31";}
.listStyle.numberRound li:nth-of-type(32):before{content: "32";}
.listStyle.numberRound li:nth-of-type(33):before{content: "33";}
.listStyle.numberRound li:nth-of-type(34):before{content: "34";}
.listStyle.numberRound li:nth-of-type(35):before{content: "35";}
.listStyle.numberRound li:nth-of-type(36):before{content: "36";}
.listStyle.numberRound li:nth-of-type(37):before{content: "37";}
.listStyle.numberRound li:nth-of-type(38):before{content: "38";}
.listStyle.numberRound li:nth-of-type(39):before{content: "39";}
.listStyle.numberRound li:nth-of-type(40):before{content: "40";}
.listStyle.numberRound li:nth-of-type(41):before{content: "41";}
.listStyle.numberRound li:nth-of-type(42):before{content: "42";}
.listStyle.numberRound li:nth-of-type(43):before{content: "43";}
.listStyle.numberRound li:nth-of-type(44):before{content: "44";}
.listStyle.numberRound li:nth-of-type(45):before{content: "45";}
.listStyle.numberRound li:nth-of-type(46):before{content: "46";}
.listStyle.numberRound li:nth-of-type(47):before{content: "47";}
.listStyle.numberRound li:nth-of-type(48):before{content: "48";}
.listStyle.numberRound li:nth-of-type(49):before{content: "49";}
.listStyle.numberRound li:nth-of-type(50):before{content: "50";}


.listStyle.numberRound li.n1:before{content: "1";}
.listStyle.numberRound li.n2:before{content: "2";}
.listStyle.numberRound li.n3:before{content: "3";}
.listStyle.numberRound li.n4:before{content: "4";}
.listStyle.numberRound li.n5:before{content: "5";}
.listStyle.numberRound li.n6:before{content: "6";}
.listStyle.numberRound li.n7:before{content: "7";}
.listStyle.numberRound li.n8:before{content: "8";}
.listStyle.numberRound li.n9:before{content: "9";}
.listStyle.numberRound li.n10:before{content: "10";}

/* ====================================================
　※付リスト
==================================================== */
ul.asterisk> li{
    position: relative;
    padding-left:1em;
    line-height: 1.66;
    text-indent: 0;
}
ul.asterisk > li:before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
ul.asterisk .icoCircle{
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  ul.asterisk:not(:last-child){margin-bottom: 5px;}
  * + ul.asterisk{margin-top: 5px;}
}
@media screen and (max-width: 767px) {
  ul.asterisk:not(:last-child){margin-bottom: 5px;}
  * + ul.asterisk{margin-top: 5px;}
}



/* ######################################################################################

　新着お知らせ　topicsInfo

###################################################################################### */

/* 罫線スタイル
-------------------------------------*/
.topicsInfo.topBorder .entry:first-child { border-top-width: 1px; }
.topicsInfo .entry {
    border-color: #F2F4F5;
    border-bottom-width: 1px;
}

/* 罫線との余白
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .topicsInfo .entry {padding: 1.1em 0;}
}
@media screen and (max-width: 767px) {
    .topicsInfo .entry {padding: 1em 0;}
}

/* ラベルの長さ
-------------------------------------*/
.topicsInfo .tag {min-width:6em;}


/* =======================================================
　基本スタイル
========================================================== */
.topicsInfo .entry {
    position: relative;
}
.topicsInfo a{font-size: 1.5rem; text-decoration: none; color: #000;}
.topicsInfo a:hover .entry{ background: #F2F4F5;}

.topicsInfo .date{
    font-family: 'Roboto', sans-serif;
    color: #888888;
    font-weight: 400;
    font-size: 1.3rem;
	padding-right: 20px;
}
.topicsInfo .tag {
	 font-family: Arial,"游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino kaku Gothic ProN", "メイリオ", sans-serif;
    display:inline-block;
    font-size:1.0rem;
    background:#838383;
    padding:0.6em 0.4em 0.4em;
    white-space:nowrap;
    vertical-align:middle;
    margin:0 0 0 1em;
    text-align:center;
    line-height:1;
    color: #fff;
    font-weight: normal;
}
.topicsInfo a .text{text-decoration: none;
}
.topicsInfo a .text:hover{text-decoration: none; color: #333;}

.topicsInfo .new{color: #CC4C3F; font-family: 'Roboto', sans-serif; font-size: 1.3rem; padding-left: 0.5em;}

@media print, screen and (min-width: 768px) {
    .topicsInfo .tag {text-align:center;}
    .topicsInfo .new{font-weight: 500; font-style: italic;}
    .topicsInfo .new.pc{display: inline-block;}
    .topicsInfo a:hover .new.pc{display: inline-block;}
}
@media screen and (max-width: 767px) {
    .topicsInfo .date:after{
        content: "";
        display: block;
        clear: both;
    }
    .topicsInfo .new{ font-family: 'Roboto', sans-serif; font-weight: 400;}
}

/* タグの色
-------------------------------------*/
.topicsInfo .tag.green{background: #009935;}
.topicsInfo .tag.blue{background: #20A3B8;}
.topicsInfo .tag.purple{background: #833C9D;}
.topicsInfo .tag.red{background: #CC4C3F;}
.topicsInfo .tag.yellow{background: #9A900D;}

/* タグなしのときに日付右のpaddhing広く
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .topicsInfo.dateInline .date.noTag{padding-right: 1.7em;}
}

/*  タグのみ（日付なし）のとき
-------------------------------------*/
.topicsInfo.dateInline .date.onlyTag .tag{margin-left: 0;}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .topicsInfo.dateInline .date.onlyTag .tag{float: left;}
}

/* =======================================================
　線種
========================================================== */
.topicsInfo.borderSolid .entry { border-style: solid; }
.topicsInfo.borderDashed .entry { border-style: dashed; }
.topicsInfo.borderDotted .entry { border-style: dotted; }

@media print, screen and (min-width: 768px) {
    .topicsInfo .entry { font-size: 1.5rem; }
    .topicsInfo .entry a:hover { text-decoration: underline; }
}
@media screen and (max-width: 767px) {
    .topicsInfo .entry { font-size: 1.4rem; }
    .topicsInfo .date {margin-bottom:0.5em;}
}
/* =======================================================
　dateInline
========================================================== */
@media print, screen and (min-width: 768px) {
    .topicsInfo.dateInline .date {
        display: table-cell;
        white-space: nowrap;
        padding-right:1em;
    }
    .topicsInfo.dateInline .text {display: table-cell;}
}
/* =======================================================
　dateBlock
========================================================== */
@media print, screen and (min-width: 768px) {
    .topicsInfo.dateBlock .date {margin-bottom:0.25em;}
}

/* ######################################################################################

    topicsInfoBox　（各ページのトップなどに配置するとき/上線付き、一覧へ飛ぶボタンあり）

###################################################################################### */
.topicsInfoBox .topicsInfo li:first-child .entry{border-top: 1px solid #c9ccd5;}
.topicsInfoBox .buttonBox .button{padding: 0.8em 2em;}

@media print, screen and (min-width: 768px) {
    .topicsInfoBox{position: relative;}
    .topicsInfoBox .buttonBox{position: absolute; top: 0; right: 0;}
}
@media screen and (max-width: 767px) {
    .topicsInfoBox .buttonBox{margin-top: 1.5em;}
}




/* ######################################################################################

　カードタイプ　topicsInfoCardType

###################################################################################### */
.topicsInfoCardType{display: flex; flex-wrap: wrap;}


.topicsInfoCardType li{margin-right: 1.8%!important;}

.topicsInfoCardType:before{order: 1;}
.topicsInfoCardType > li:not(.pagenationWarp){
    margin-top: 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    background: #fff;
}
.topicsInfoCardType > li:not(.pagenationWarp) a{
    color: #151D35;
    text-decoration: none;
    border: 1px solid #fff;
    overflow: inherit;
    height: 100%;
}
.topicsInfoCardType > li:not(.pagenationWarp) a:hover{
    border-color: #CDD6DD;
}
.topicsInfoCardType > li:not(.pagenationWarp) .tag{
    display: inline-block;
    margin-right: 0.5em;
    padding: 0.35em 0.75em 0.25em;
    line-height: 1;
    font-size: 1rem;
    color: #fff;
}
.topicsInfoCardType > li:not(.pagenationWarp) .img{
    position: relative;
    width: calc(100% + 2px);
    margin-right: -1px;
    margin-left: -1px;
    margin-top: -1px;
}
.topicsInfoCardType > li:not(.pagenationWarp) .img figure{padding-top: 64.28%;}
.topicsInfoCardType > li:not(.pagenationWarp) .img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.topicsInfoCardType > li:not(.pagenationWarp) .date,
.topicsInfoCardType > li:not(.pagenationWarp) .text{
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
.topicsInfoCardType > li:not(.pagenationWarp) .text{
    border-bottom: 1px solid #fff;
}
.topicsInfoCardType > li:not(.pagenationWarp) a:hover .text{
    text-decoration: underline
}

@media print, screen and (min-width: 768px) {
	.topicsInfoCardType{justify-content: flex-start!important;}
    .topicsInfoCardType:before,
    .topicsInfoCardType:after{
        content: "";
        display: block;
        width: calc(25% - 20px);
    }
    .topicsInfoCardType:before{order: 1;}
    .topicsInfoCardType > li:not(.pagenationWarp){width: calc(25% - 25px);}
    .topicsInfoCardType > li:not(.pagenationWarp):nth-of-type(1),
    .topicsInfoCardType > li:not(.pagenationWarp):nth-of-type(2),
    .topicsInfoCardType > li:not(.pagenationWarp):nth-of-type(3),
    .topicsInfoCardType > li:not(.pagenationWarp):nth-of-type(4){margin-top: 0;}
    .topicsInfoCardType > li:not(.pagenationWarp) .date,
    .topicsInfoCardType > li:not(.pagenationWarp) .text{padding-left: 20px; padding-right: 20px;}
    .topicsInfoCardType > li:not(.pagenationWarp) .date{padding-top: 25px; padding-bottom: 0.5em; font-size: 1.2rem;}
    .topicsInfoCardType > li:not(.pagenationWarp) .text{padding-bottom: 40px; font-size: 1.5rem; font-weight: bold; line-height: 1.73;}
}
@media screen and (max-width: 767px) {
	.topicsInfoCardType{justify-content: space-between;}
    .topicsInfoCardType > li:not(.pagenationWarp){width: calc(49% - 8px);}
    .topicsInfoCardType > li:not(.pagenationWarp):nth-of-type(1),
    .topicsInfoCardType > li:not(.pagenationWarp):nth-of-type(2){margin-top: 0;}
    .topicsInfoCardType > li:not(.pagenationWarp) .date,
    .topicsInfoCardType > li:not(.pagenationWarp) .text{padding-left: 10px; padding-right: 10px;}
    .topicsInfoCardType > li:not(.pagenationWarp) .date{padding-top: 10px; padding-bottom: 0.5em; font-size: 1.1rem;}
    .topicsInfoCardType > li:not(.pagenationWarp) .text{padding-bottom: 10px; font-size: 1.2rem; line-height: 1.33;}
}

/* newアイコン */
.topicsInfoCardType > li:not(.pagenationWarp) .img.new{position: relative;}
.topicsInfoCardType > li:not(.pagenationWarp) .img.new:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    background-image: url(../img/contents/news/new.svg);
    background-size: 44px 44px;
    background-repeat: no-repeat;
    z-index: 6;
}

/* column3 */
@media print, screen and (min-width: 768px) {
    .topicsInfoCardType.column3{justify-content: flex-start;}
    .topicsInfoCardType.column3 > li:not(.pagenationWarp){margin-top: 25px; width: calc(33.333333% - 26px); margin-right: 39px;}
    .topicsInfoCardType.column3 > li:not(.pagenationWarp):nth-of-type(3n){margin-right: 0;}
    .topicsInfoCardType.column3:before,
    .topicsInfoCardType.column3:after{display: none;}
    .topicsInfoCardType.column3 > li:not(.pagenationWarp):nth-of-type(1),
    .topicsInfoCardType.column3 > li:not(.pagenationWarp):nth-of-type(2),
    .topicsInfoCardType.column3 > li:not(.pagenationWarp):nth-of-type(3){margin-top: 0;}
    .topicsInfoCardType.column3 > li:not(.pagenationWarp) .img figure{padding-top: 61.68%;}
}


/* 記事なし */
.topicsInfoCardType .noEntry{margin-top: 30px;}

/* pagenationWarp */
.pagenationWarp{width: 100%;}



/* ######################################################################################

    ページ内　タブ切り替え

###################################################################################### */
.tab{overflow:hidden;}
.tab li{
    float: left;
    text-align: center;
	border-right: 1px solid #CDD6DD;
}
.tab li:last-child{border-right: none;}
.tab li span{
    display: inline-block;
    border-radius: 2em;
    line-height: 1.25;
    cursor: pointer;
}
.tab li span:hover{
    color: #AAAAAA;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.tab li.select span,
.tab li.select span:hover{
    color: #fff;
}
.tab li.select:nth-child(1) span,
.tab li.select:nth-child(1) span:hover{ background-color: #111;}

.tab li.select:nth-child(2) span,
.tab li.select:nth-child(2) span:hover{ background-color: #009935;}

.tab li.select:nth-child(3) span,
.tab li.select:nth-child(3) span:hover{ background-color: #20a3b8;}

.tab li.select:nth-child(4) span,
.tab li.select:nth-child(4) span:hover{ background-color: #9a900d;}

.tab li.select:nth-child(5) span,
.tab li.select:nth-child(5) span:hover{ background-color: #cc4c3f;}

.tab li.select:nth-child(6) span,
.tab li.select:nth-child(6) span:hover{ background-color: #8f4991;}

.tab li.select:nth-child(7) span,
.tab li.select:nth-child(7) span:hover{ background-color: #7970d8;}

.tab li.select:nth-child(8) span,
.tab li.select:nth-child(8) span:hover{ background-color: #f0c068;}

.tab li.select:nth-child(9) span,
.tab li.select:nth-child(9) span:hover{ background-color: #b7b7b7;}

.tabContents > ul{padding: 25px 0; flex-wrap: wrap;}
.tabContents > ul > li{width: 100%;}
.hide {display:none;}


@media print, screen and (min-width: 768px) {
    .tab{
        padding-top: 1.25em;
        padding-bottom: 1.25em;
    } 
    .tab li{ padding: 0 0.5em;}
    .tab li span{
        padding: 0.25em 0.5em;
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 767px) {
    .scrollArea{overflow-x:scroll;}
    .tab{width: 700px;}
    .tab li{line-height: 1; padding-left: 0.25em; padding-right: 0.25em;}
    .tab li:first-child{padding-left: 0;}
    .tab li:last-child{padding-right: 0;}
    .tab li span{
        padding: 0.25em 0.75em;
        font-size: 1.2rem;
        min-width: 68%;
    }
}


/* ######################################################################################

　記事詳細   topicsDetail

###################################################################################### */
.topicsDetail .clearfix{margin-bottom: 1em;}
.topicsDetail .clearfix:after{
    content: "";
    display: block;
    clear: both;
}
.topicsDetail .clearfix .greenUnderLineTitle{float: left;}
.topicsDetail .clearfix .button{float: right;}

.topicsDetail .post h3{border-top: 1px solid #c1bac6; border-bottom: 1px solid #c1bac6;}
.topicsDetail .post h3 .date{font-family: 'Roboto', sans-serif; font-weight: normal;}

.topicsDetail .post figure, .topicsDetail .post p{margin-bottom: 1.5em;}
.topicsDetail .post figcaption{font-size: 1.3rem; margin-top: 5px;}

@media print, screen and (min-width: 768px) {
    .topicsDetail .post .topUnderLine,
    .topicsDetail .post h3{
        margin-bottom: 1.5em;
        font-size: 2.6rem;
        padding: 2.3em 5em 2.3em 0;
        position: relative;
    }
    .topicsDetail .post .topUnderLine .date,
    .topicsDetail .post h3 .date{
        position: absolute;
        top: calc(50% - 12.5px);
        right: 0;
        font-size: 2.0rem;
    }
    .topicsDetail .post h4{font-size: 1.8rem; font-weight: bold;}
    
    .topicsDetail .post .figureBox.row{margin-right: -1.1%; margin-left: -1.1%;}
    .topicsDetail .post .figureBox.row figure{padding-right: 1.1%; padding-left: 1.1%;}
    
    .topicsDetail .buttonBox{margin-top: 2em; text-align: center;}


    .topicsDetail .col-sm-6:nth-of-type(2n-1){clear:left;}

   
}
@media screen and (max-width: 767px) {
    .topicsDetail .clearfix .button{font-size: 1.3rem;}
    .topicsDetail .post h3{margin-bottom: 2em; font-size: 1.8rem; padding: 2em 0;}
    .topicsDetail .post h3 .date{font-size: 1.4rem; margin-top: 1em; display: block;}
    .topicsDetail .post h4{font-size: 1.6rem; font-weight: bold;}
    .topicsDetail figure img {width:100%; height:auto;}
    
    .topicsDetail .buttonBox{margin: 2em 0;}

    .topicsDetail .post img {max-width:100%; height:auto;}
}


/* ######################################################################################

    アーカイブ（サイドバー）

###################################################################################### */
.archive .archiveTitle{
    background-color: #009935;
    color: #fff;
    text-align: center;
    padding: 0.8em;
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 40px;
}
.archive .archiveList li a{
    display: block;
    border-bottom: 1px solid #ddd;
    padding: 0.6em;
    text-decoration: none;
    color: #111;
    font-size: 1.4rem;
}

.archive .archiveList li a:hover{background-color: #f4f5f7;}
.archive .archiveList li.active a{background-color: #f4f5f7;}





/* ######################################################################################

　imgFit　枠に合わせて画像をフィット　※枠の高さ指定必須

###################################################################################### */

/* ====================================================
　画像の比率を保って枠内を埋めるようトリミング
==================================================== */
.imgFit.cover img,
img.imgFit.cover {
    object-fit: cover;
    font-family:"object-fit:cover";
}
/* ====================================================
　画像の比率を保って枠内に表示
==================================================== */
.imgFit.contain img,
img.imgFit.contain {
    object-fit: contain;
    font-family:"object-fit:contain";
}
/* ====================================================
　枠のサイズに画像を伸縮（比率は無視）
==================================================== */
.imgFit.fill img,
img.imgFit.fill {
    object-fit: fill;
    font-family:"object-fit:fill";
}
/* ====================================================
　画像の比率を保ってオリジナルのサイズでトリミング
==================================================== */
.imgFit.none img,
img.imgFit.none {
    object-fit: none;
    font-family:"object-fit:none";
}
/* ====================================================
　画像が大きい場合contain、小さい場合はnoneの挙動
==================================================== */
.imgFit.scaleDown img,
img.imgFit.scaleDown {
    object-fit: scale-down;
    font-family:"object-fit:scale-down";
}




/* ######################################################################################

　画像マウスオーバーアクション　imageHover

###################################################################################### */
/* ====================================================
　画像ズーム　zoomCaption
==================================================== */
.imageHover.zoomCaption {
    display:block;
    overflow: hidden;
}
.imageHover.zoomCaption figure {
    position:relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
}
.imageHover.zoomCaption figure:before {
    content:"";
    display:block;
    z-index:5;
    background-color: rgba(0,0,0,0.2);
    top:0;
    height:100%;
    -webkit-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    -moz-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    -ms-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    -o-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    opacity: 0;
    position:absolute;
    left:0;
    width:100%;
}

.imageHover.zoomCaption img {
    -webkit-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
       -moz-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
        -ms-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
         -o-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
            transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.imageHover.zoomCaption:hover figure img {
    -webkit-transform:scale(1.10,1.10);
       -moz-transform:scale(1.10,1.10);
        -ms-transform:scale(1.10,1.10);
         -o-transform:scale(1.10,1.10);
            transform: scale(1.10,1.10);
}
.imageHover.zoomCaption:hover figure:before{opacity:1;}





/* ######################################################################################

   　linkCard (画像　+　タイトル　のリンク)

###################################################################################### */
.linkCard{text-decoration: none; color: #111;}
.linkCard .title{
    margin-top: 1.5px;
    padding:0.45em 2.5em 0.45em 0.9em;
    background-color: #f4f5f7;
    border: 1px solid #ddd;
    position: relative;
    font-weight: bold;
    font-size: 1.4rem;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    
}
.linkCard .title:before{
    content: "";
    width: 17px;
    height: 17px;
    border-radius: 9px;
    position: absolute;
    top: 10px;
    right: 14px;
    border: 1px solid #009935;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.linkCard .title:after{
    content: "";
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    position: absolute;
    top: 16px;
    right: 21px;
    border-top: 1px solid #009935;
    border-right: 1px solid #009935;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.linkCard:hover .title{background: #fff;}
.linkCard:hover .title:before{
    background: #009935;
}

.linkCard:hover .title:after{
    border-color: #fff;
}

@media print, screen and (min-width: 768px) {
    .linkCard .img img{width: 100%;}
    .linkCardBox ul li{margin-bottom: 1.5em;}
}
@media screen and (max-width: 767px) {
    .linkCard .img img{width: 100%;}
    .linkCardBox ul li + li{margin-top: 1.5em;}

}


/*  エフェクト　画像ズーム追加
-------------------------------------*/
.linkCard {
    display:block;
    overflow: hidden;
}
.linkCard .img {
    position:relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
}

@media print, screen and (min-width: 768px) {
    .linkCard .img {height:155px;}
}

.linkCard .img:before {
    content:"";
    display:block;
    z-index:5;
    background-color: rgba(0,0,0,0.2);
    top:0;
    height:100%;
    -webkit-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    -moz-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    -ms-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    -o-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    opacity: 0;
    position:absolute;
    left:0;
    width:100%;
}

.linkCard .img img {
    -webkit-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
       -moz-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
        -ms-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
         -o-transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
            transition:all 0.5s cubic-bezier(0.25, 0.87, 0.41, 1);
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.linkCard:hover .img img {
    -webkit-transform:scale(1.10,1.10);
       -moz-transform:scale(1.10,1.10);
        -ms-transform:scale(1.10,1.10);
         -o-transform:scale(1.10,1.10);
            transform: scale(1.10,1.10);
}
.linkCard:hover .img:before{opacity:1;}



/* ######################################################################################

　要素を並べる（横並び）の幅

###################################################################################### */

/* 幅270px を　3列で
-------------------------------------*/
.row.w270 {margin-left: -1.1665%; margin-right: -1.1665%;}
.row.w270 > *{padding-left: 1.1665%; padding-right: 1.1665%;}

/* 幅420px を　2列で
-------------------------------------*/
.row.w420 {margin-right: -1.62%; margin-left: -1.62%;}
.row.w420 > *{padding-right: 1.62%; padding-left: 1.62%;}

/* 幅425px を　2列で
-------------------------------------*/
.row.w425 {margin-right: -1.10%; margin-left: -1.10%;}
.row.w425 > *{padding-right: 1.10%; padding-left: 1.10%;}

/*  幅210px を　4列で
-------------------------------------*/
.row.w210 {margin-right: -0.55%; margin-left: -0.55%;}
.row.w210 > * {padding-left: 0.55%; padding-right: 0.55%;}




/* ######################################################################################

    figureBox（画像　+ キャプション）　

###################################################################################### */
.figureBox figcaption{display: block; margin-top: 5px;}
.figureBox img{width: 100%; height: auto;}

@media print, screen and (min-width: 768px) {
    .figureBox.row > *{margin-bottom: 20px;}
}
@media screen and (max-width: 767px) {
    .figureBox.row > *{margin-bottom: 1.2em;}
}


/* ######################################################################################

    prefaceLink (見出し + テキスト + 画像 + ボタン の枠)

###################################################################################### */
.prefaceLink .buttonBox .button{font-size: 1.3rem;}
.prefaceLink .text{margin-bottom: 1em;}

.prefaceLink figcaption{font-size: 1.4rem;}

@media print, screen and (min-width: 768px) {
    .prefaceLink{margin-bottom: 2.5em;}
    .prefaceLink{position: relative; }

    .prefaceLink .buttonBox{position: absolute; top: 7px; right: 13.438px;}
    .prefaceLink .buttonBox .button{padding: 0.8em 2em;}
}
@media screen and (max-width: 767px) {
    .prefaceLink{margin-bottom: 2.5em;}
    .prefaceLink .buttonBox{margin-top: 0.3em;}
}


/* ######################################################################################

      sunflex

###################################################################################### */
/* ====================================================
    column
==================================================== */
.sunflex.column3 > * img,
.sunflex.column2 > * img{width: 100%; height: auto;}

@media print, screen and (min-width: 768px) {
    .sunflex.column3,
    .sunflex.column2{justify-content: space-between;}

    * + .sunflex.column3,
    * + .sunflex.column2{margin-top: 40px;}

    .sunflex.column3 > *,
    .sunflex.column2 > * {display: flex; flex-direction: column;}

    .sunflex__bottom{margin-top: auto;}

    .sunflex.column3 > * + *,
    .sunflex.column2 > * + *{margin-top: 2.5em;}
    .sunflex.column3.narrow > * + *,
    .sunflex.column2.narrow > * + *{margin-top: 1.5em;}
	
    .sunflex.column2 > *{width: 48%;}
    .sunflex.column2 > *:nth-of-type(1),
    .sunflex.column2 > *:nth-of-type(2){margin-top: 0;}
    
    .sunflex.column3 > *{width: 31.355932%;}
    .sunflex.column3 > *:nth-of-type(3n + 1){margin-left: 0;}
    .sunflex.column3 > *:nth-of-type(1),
    .sunflex.column3 > *:nth-of-type(2),
    .sunflex.column3 > *:nth-of-type(3){margin-top: 0;}
    
    .sunflex.column4 > *{width: 22.881355%;}
    .sunflex.column4 > *:nth-of-type(4n + 1){margin-left: 0;}
    .sunflex.column4 > *:nth-of-type(1),
    .sunflex.column4 > *:nth-of-type(2),
    .sunflex.column4 > *:nth-of-type(3),
    .sunflex.column4 > *:nth-of-type(4){margin-top: 0;}

    .mainColumn .sunflex.column2 > *{width: 47.91%;}
    .mainColumn .sunflex.column2 > *:nth-of-type(1),
    .mainColumn .sunflex.column2 > *:nth-of-type(2){margin-top: 0;}
    
    .mainColumn .sunflex.column3 > *{width: 31.25%; margin-left: 3.125%;}
    .mainColumn .sunflex.column3 > *:nth-of-type(3n + 1){margin-left: 0;}
    .mainColumn .sunflex.column3 > *:nth-of-type(1),
    .mainColumn .sunflex.column3 > *:nth-of-type(2),
    .mainColumn .sunflex.column3 > *:nth-of-type(3){margin-top: 0;}
}
@media screen and (max-width: 767px){
    .sunflex.column3 > *,
    .sunflex.column2 > * {width: 100%;}
    
    * + .sunflex.column3,
    * + .sunflex.column2{margin-top: 25px;}

    .sunflex.column3 > * + *,
    .sunflex.column2 > * + *{margin-top: 25px;}

    .sunflex.sp-column2 > *{width: 48%;}
    .sunflex.sp-column2 > *:nth-of-type(2n){margin-left: 4%;}
    .sunflex.sp-column2 > *:nth-of-type(1),
    .sunflex.sp-column2 > *:nth-of-type(2){margin-top: 0;}
}



/* ====================================================
    sp-full
==================================================== */
@media screen and (max-width: 767px){
    .sunflex.sp-full{}
    .sunflex.sp-full > *{width: 100%;}
    .sunflex.sp-full > * + *{margin-top: 1.5em;}
}





/* ######################################################################################

　テーブル　table 表

###################################################################################### */
table{width: 100%;}

@media print, screen and (min-width: 768px) {
    * + table,
    * + .spScroll{margin-top: 40px;}
	
}
@media screen and (max-width: 767px) {
    * + table,
    * + .spScroll{margin-top: 40px;}
}

/* スマホスクロール
-------------------------------------*/
@media screen and (max-width: 767px) {
    .spScroll{overflow-x: scroll;}
    .spScroll table{width: 960px;}
}


/* ====================================================
　罫線色
==================================================== */
th,td,td:before {border-color: #ddd;}

/* ====================================================
　見出しセル
==================================================== */
th, td:before {
    background: #f4f5f7;
    vertical-align: top;
    text-align: left;
}
.noTitleBg th,
.noTitleBg td:before{background: transparent;}
th.green{background-color: #3e65bf; color: #fff;}
th[scope="row"],
td:before {width:6em;}


/* [cell**-create] 時の対応
-------------------------------------*/
@media print, screen and (max-width: 767px) {
    table.cell-xs-create td {padding-left: 7em;}
}
@media print, screen and (max-width: 991px) {
    table.cell-sm-create td {padding-left: 7em;}
}
@media screen and (max-width: 1199px) {
    table.cell-md-create td {padding-left: 7em;}
}
@media screen and (max-width: 9999px) {
    table.cell-lg-create td {padding-left: 7em;}
}

/* ====================================================
　文字サイズ
==================================================== */
@media print, screen and (min-width: 768px) {
    table,th,td {font-size:1.6rem;}
    caption {font-size:80%;}
	
}
@media screen and (max-width: 767px) {
    table,th,td {font-size:1.5rem;}
    caption {font-size:80%;}
}

/* ====================================================
　セル余白
==================================================== */
th,td,
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {padding: 0.8em 1em;}
@media print, screen and (min-width: 768px) {
    th,td {padding: 1.5em 1em;}
    .borderBox th, .borderBox td{padding-top: 0.8em; padding-bottom: 0.8em;}
    .borderBox th{text-align: center;}
}

/* [**-block] 時の対応
-------------------------------------*/
@media print, screen and (max-width: 767px) {
    table.xs-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.xs-block tr + tr {margin-bottom:-1px;}
    table.cell-xs-create tr + tr {margin-top:1px;}
    table.xs-block tr:first-of-type > *:last-child{border-bottom: none;}

}
@media print, screen and (max-width: 991px) {
    table.sm-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.sm-block tr + tr {margin-bottom:-1px;}
    table.cell-sm-create tr + tr {margin-top:1px;}
}
@media screen and (max-width: 1199px) {
    table.md-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.md-block tr + tr {margin-bottom:-1px;}
    table.cell-md-create tr + tr {margin-top:1px;}
}
@media screen and (max-width: 9999px) {
    table.lg-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.lg-block tr + tr {margin-top:-1px;}
    table.cell-lg-create tr + tr {margin-top:1px;}
}


/* ====================================================
　背景色タイプ
==================================================== */
.greenBg{margin-bottom: 0.5em;}
.greenBg th{ 
	background: #0A6733;
	color: #fff; 
	padding: 0.4em 0; 
	font-size: 14px; 
	text-align: center;
	vertical-align: top;
    border-left: 1px solid #fff !important;}
.greenBg td { 
	background: #F2F4F5;
	padding: 0.4em 0.6em;
    font-size: 15px;
	line-height: 1.4;
	vertical-align:middle;
    border-left: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;}

.greenBg th:not(:first-child),
.greenBg td:not(:first-child) {border-left-width:0;}

@media print, screen and (min-width: 768px) {
	.greenBg th{min-width: 160px;}
}
@media screen and (max-width: 767px) {
	.greenBg th{min-width: 120px;}
	.spScroll .greenBg{ width: 600px !important;}
}


/* ====================================================
　罫線タイプ
==================================================== */

/* 囲み
-------------------------------------*/
.borderBox th,
.borderBox td { border-width: 1px; }

.borderBox tr:not(:first-child) th,
.borderBox tr:not(:first-child) td {border-top-width:0;}

.borderBox th:not(:first-child),
.borderBox td:not(:first-child) {border-left-width:0;}


/* 幅
-------------------------------------*/
@media print, screen and (min-width: 768px) {
.borderHorizon th:first-child{ width: 160px; padding-left: 0.5em;}
}

/* 水平線
-------------------------------------*/
.borderHorizon th,
.borderHorizon td { border-width: 1px 0; }

.borderHorizon tr:not(:first-child) th,
.borderHorizon tr:not(:first-child) td {border-top-width:0;}

/* ====================================================
　線種
==================================================== */
.borderSolid th { border-style: solid; }
.borderSolid td { border-style: solid; }
.borderSolid td:before { border-style: solid; }
.borderDotted th { border-style: dotted; }
.borderDotted td { border-style: dotted; }
.borderDotted td:before { border-style: dotted; }
.borderDashed th { border-style: dashed; }
.borderDashed td { border-style: dashed; }
.borderDashed td:before { border-style: dashed; }
/* ====================================================
　*のときTHをサイドに作る
==================================================== */
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 1px 0 0;
    height: 100%;
}
table.borderHorizon.cell-xs-create td:before,
table.borderHorizon.cell-sm-create td:before,
table.borderHorizon.cell-md-create td:before,
table.borderHorizon.cell-lg-create td:before { border: none; }

@media screen and (max-width: 767px) {
/* ====================================================
　xsのときcellをBlock
==================================================== */
    table.xs-block,
    table.xs-block caption,
    table.xs-block thead,
    table.xs-block tbody,
    table.xs-block tr,
    table.xs-block th,
    table.xs-block td { display: block; width:100%; }

    table.xs-block th:not(:first-child),
    table.xs-block td:not(:first-child) {border-top-width:0 !important;}
    table.xs-block tr:not(:first-child) th,
    table.xs-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.xs-block th:not(:first-child),
    table.borderBox.xs-block td:not(:first-child) {border-left-width:1px;}

    table.cell-xs-create th { display: none; }
    table.cell-xs-create td {
        position: relative;
        overflow: hidden;
    }
    table.cell-xs-create td:before { content: attr(title); }
}
@media screen and (max-width: 991px) {
/* ====================================================
　smのときcellをBlock
==================================================== */
    table.sm-block,
    table.sm-block caption,
    table.sm-block thead,
    table.sm-block tbody,
    table.sm-block tr,
    table.sm-block th,
    table.sm-block td { display: block; width:100%; }

    table.sm-block th:not(:first-child),
    table.sm-block td:not(:first-child) {border-top-width:0 !important;}
    table.sm-block tr:not(:first-child) th,
    table.sm-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.sm-block th:not(:first-child),
    table.borderBox.sm-block td:not(:first-child) {border-left-width:1px;}

    table.cell-sm-create th { display: none; }
    table.cell-sm-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-sm-create td:before { content: attr(title); }
}
@media screen and (max-width: 1199px) {
/* ====================================================
　mdのときcellをBlock
==================================================== */
    table.md-block,
    table.md-block caption,
    table.md-block thead,
    table.md-block tbody,
    table.md-block tr,
    table.md-block th,
    table.md-block td { display: block; width:100%; }

    table.md-block th:not(:first-child),
    table.md-block td:not(:first-child) {border-top-width:0 !important;}
    table.md-block tr:not(:first-child) th,
    table.md-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.md-block th:not(:first-child),
    table.borderBox.md-block td:not(:first-child) {border-left-width:1px;}

    table.cell-md-create th { display: none; }
    table.cell-md-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-md-create td:before { content: attr(title); }
}
@media screen and (max-width: 9999px) {
/* ====================================================
　lgのときcellをBlock
==================================================== */
    table.lg-block,
    table.lg-block caption,
    table.lg-block thead,
    table.lg-block tbody,
    table.lg-block tr,
    table.lg-block th,
    table.lg-block td { display: block; width:100%; }

    table.lg-block th:not(:first-child),
    table.lg-block td:not(:first-child) {border-top-width:0 !important;}
    table.lg-block tr:not(:first-child) th,
    table.lg-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.lg-block th:not(:first-child),
    table.borderBox.lg-block td:not(:first-child) {border-left-width:1px;}

    table.cell-lg-create th { display: none; }
    table.cell-lg-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-lg-create td:before { content: attr(title); }
}


/* ######################################################################################

    tableList （年表等　スマホのときブロック化）

###################################################################################### */
.tableList th,.tableList td {
    text-align: left;
}
.tableList th{background-color: #fff;}

@media print, screen and (min-width: 768px) {
    .tableList th{padding: 20px 20px 20px 0px;}
    .tableList td{padding: 20px 0px;}
}
@media screen and (max-width: 767px) {
    .tableList .xs-block th{padding: 0.6em 0 0.2em;}
    .tableList .xs-block td{padding: 0 0 0.8em;}
    .tableList th,
    .tableList tr:first-child td{border-bottom: none;}
}

/* ######################################################################################
    
    grayBeltList (グレーの背景 + 緑テキストリンク　のリスト)

###################################################################################### */

.grayBeltList li + li{margin-top: 5px;}
.grayBeltList li a{
    display: block;
    padding: 0.5em 1em 0.5em 2.5em;
    position: relative;
    background: #f4f5f7;
    border: 1px solid #ddd;
}

/* アイコン */
.grayBeltList li a:before{
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 12.5px;
    left: 10px;
    border: 1px solid #009935;
    border-radius: 9px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.grayBeltList li a:after{
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    top: 18.5px;
    left: 15px;
    border-right: 1px solid #009935;
    border-top: 1px solid #009935;
    transform: rotate(45deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*　hover　*/
.grayBeltList li a:hover{
    color: #333;
    background: #fff;
    text-decoration: none;
}

.grayBeltList li a:hover:before{
    background: #009935;
}
.grayBeltList li a:hover:after{
    border-color: #fff;
}


/* ######################################################################################

    greenTitleList　緑タイトルとテキスト（faq）

###################################################################################### */
.greenTitleList{}
.greenTitleList .title{font-weight: bold; color: #009935;}


/*  「q」「a」の文字
-------------------------------------*/
.greenTitleList .question,
.greenTitleList .answer{position: relative; padding-left: 25px;}

.greenTitleList .question:before,
.greenTitleList .answer:before{
    position: absolute;
    top: 0;
    left: 0;
}

.greenTitleList .question:before{content: "Q：";}
.greenTitleList .answer:before{content: "A：";}



/* ######################################################################################

    フォーム

###################################################################################### */
input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    border: 1px solid #BABED1;
    border-radius: 4px;
    background-color: #ffffff;
    max-width: 100%;
    color: #16181B !important;
    font-family: Arial,"游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino kaku Gothic ProN", "メイリオ", sans-serif;
  }
  
  label.select select,
  textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: inset 1px 1px 3px transparent;
    border: 1px solid #BABED1;
    border-radius: 4px;
    background-color: #ffffff;
    max-width: 100%;
    color: #16181B !important;
  }
  
  @media print, screen and (min-width: 768px) {
    input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
      padding: 14px 10px;
      font-size: 15px;
    }
    label.select select,
    textarea {
      padding: 10px;
      font-size:  15px;
    }
  }
  @media screen and (max-width: 767px){
    input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
      padding: 16px 10px;
      font-size: 15px;
    }
    label.select select,
    textarea {
      padding: 14px 10px;
      font-size: 15px;
    }
  }
  
  
  input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
    height: auto;
  }
  
  textarea {
    width: 100%;
	min-height: 8em;
    line-height: 1.5;
  }
  label.select{
    position: relative;
  }
  label.select select {
    padding-right: 3em;
    line-height: 1.2;
  }
  label.select select:not([multiple]) {
    box-shadow: none;
    margin: 0;
  }
  label.select:after {
    content: "";
    display: inline-block;
    position: absolute;
    pointer-events: none;
    top: 22%;
    right: 1em;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid #BABED1;
    border-right: 2px solid #BABED1;
    transform: rotate(45deg);
  }
  label.select select::-ms-expand {
    display: none;
  }
  label.select option[disabled="disabled"] {
    background: #f0f0f0;
    color: #cccccc;
  }
  


  label.select.select2:after,
  label.select.select2:before {
    content: "";
    position: absolute;
    right: 1em;
    width: 7px;
    height: 7px;
    display: inline-block;
    pointer-events: none;
    transform: rotate(45deg);

  }
  label.select.select2:after {
    top: 56%;
    border-bottom: 2px solid #BABED1;
    border-right: 2px solid #BABED1;
  }
  label.select.select2:before {
    top: 10%;
    border-top: 2px solid #BABED1;
    border-left: 2px solid #BABED1;
  }


  input-placeholder {
    color: #BABED1 !important;
  }
  
  ::-webkit-input-placeholder {
    color: #BABED1 !important;
  }
  
  ::-moz-placeholder {
    color: #BABED1 !important;
  }
  
  ::-ms-input-placeholder {
    color: #BABED1 !important;
  }
  
  -webkit-input-placeholder {
    color: #BABED1 !important;
  }
  
  input:-ms-input-placeholder {
    color: #BABED1 !important;
  }
  
  -moz-placeholder {
    color: #BABED1 !important;
  }
  
  :-ms-input-placeholder {
    color: #BABED1 !important;
  }
  
  input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="number"]:focus {
    border-color: #004BB1;
    background: #fff;
    box-shadow: none;
  }
  
  label.select select:focus,
  textarea:focus {
    border-color: #004BB1;
    background: #fff;
    box-shadow: none;
  }
  
  select:not([multiple]):focus {
    box-shadow: none;
  }
  
  input + label, input + span {
    cursor: pointer;
  }
  

  /* Searchアイコン付き input
  -------------------------------------*/
  .searchInput{position: relative; display: inline-block;}
  .searchInput input{padding-right: 3em;}
  .searchInput__icon{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        padding: 0.5em 1em;
        height: 100%;
    }
    .searchInput__icon img{vertical-align: middle;}

  
  /* 日付アイコン付き input
  -------------------------------------*/
  .dateInput{position: relative; display: inline-block;}
  .dateInput input{padding-right: 3em;}
  .dateInput__icon{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        padding: 0.5em 1em;
        height: 100%;
    }
    .dateInput__icon img{vertical-align: middle;}


  /* 送信ボタン付き input
  -------------------------------------*/
.inputButton{display: flex;}
.inputButton .inputButton__input{border-top-right-radius: 0px; border-bottom-right-radius: 0px;}
.inputButton .inputButton__button{
    background-color: #004BB1;
    border: none;
    border-radius: 0 4px 4px 0;
    color: #fff;
    padding: 0.75em;
    font-size: 1.6rem;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .inputButton .inputButton__button{padding-top: 0.5em; padding-bottom: 0.5em;}
}

  
  /* ラジオボタン
  -------------------------------------*/
  .formItem__parts.block .radioButtonList {display: block;}
  .radioButtonList {display: flex; flex-wrap: wrap;}
  .radioButtonList__item{margin-right: 2em; margin-bottom: 0.5em;}
  .radioButtonList .radioButtonList__item:last-of-type {margin-right: 0;}
  @media print, screen and (min-width: 768px){      
    }
    @media screen and (max-width: 767px) {
        .radioButtonList__item{margin-right: 2em; margin-bottom: 0.5em;}
    }

  .radioButtonList input[type="radio"] {
    display: none;
  }
  .radioButtonList input[type="radio"] + label,
  .radioButtonList input[type="radio"] + span {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
  }
  .radioButtonList input[type="radio"] + label:before,
  .radioButtonList input[type="radio"] + span:before {
    content: "";
    display: inline-block;
    position: absolute;
  }
  .radioButtonList input[type="radio"] + label:before,
  .radioButtonList input[type="radio"] + span:before {
    width: 22px;
    height: 22px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    border: 1px solid #BABED1;
  }
  
  .radioButtonList input[type="radio"] + label:after,
  .radioButtonList input[type="radio"] + span:after {
  width: 14px;
  height: 14px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    border-radius: 50%;
  }
  .radioButtonList input[type="radio"]:checked + label:after, .radioButtonList input[type="radio"]:checked + span:after {
    content: "";
    background: #0060C1;
  }
  .radioButtonList input[type="radio"] + label, .radioButtonList  input[type="radio"] + span {
    cursor: pointer;
  }
  
@media all and (-ms-high-contrast: none) {/* IE */
    .radioButtonList input[type="radio"] + label:before,
    .radioButtonList input[type="radio"] + span:before {
    transform: translateY(-60%);
}
.radioButtonList input[type="radio"] + label:after,
.radioButtonList input[type="radio"] + span:after {
    transform: translateY(-70%);
}
}
  
  /* チェックボタン
  -------------------------------------*/
  .checkButtonList {display: flex; flex-wrap: wrap;}
  .checkButtonList__item{margin-right: 2em; margin-bottom: 0.5em;}
  @media print, screen and (min-width: 768px){ 
    }
    @media screen and (max-width: 767px) {
        .checkButtonList__item{margin-right: 2em; margin-bottom: 0.5em;}
    }


  .checkButtonList input[type="checkbox"] {
    display: none;
  }
  
  .checkButtonList input[type="checkbox"] + label,
  .checkButtonList input[type="checkbox"] + span {
    position: relative;
    display: inline-block;
    padding-left: 35px;
    font-weight: normal;
	text-wrap: nowrap;
  }
  .checkButtonList input[type="checkbox"] + label:before, .checkButtonList input[type="checkbox"] + span:before{
      content: "";
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 0.25em;
      transform: translateY(-50%);
    }
    .checkButtonList input[type="checkbox"] + label:before, .checkButtonList input[type="checkbox"] + label:after, .checkButtonList input[type="checkbox"] + span:before, .checkButtonList input[type="checkbox"] + span:after{
      width: 1em;
      height: 1em;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
    .checkButtonList input[type="checkbox"] + label:before, .checkButtonList input[type="checkbox"] + label:after, .checkButtonList input[type="checkbox"] + span:before, .checkButtonList input[type="checkbox"] + span:after{
      width: 1em;
      height: 1em;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
    .checkButtonList input[type="checkbox"] + label:before, .checkButtonList input[type="checkbox"] + span:before {
      content: "";
      border-radius: 2px;
      background-color: #fff;
      border: 1px solid #BABED1;
      width: 30px;
      height: 30px;
    }
    .checkButtonList input[type="checkbox"]:checked + label:after, .checkButtonList input[type="checkbox"]:checked + span:after {
      content: "";
      left: 1px;
      background: url(../img/contents/share/ico-check_blue.svg) center no-repeat;
      background-size: 60%;
      background-color: #fff;
      width: 28px;
      height: 28px;
      border-radius: 4px;
    }
    .checkButtonList input[type="checkbox"] + label, .checkButtonList input[type="checkbox"] + span {
      cursor: pointer;
      
  }
  
  
  
  
  label.file:before {
    content: "ファイルを選択";
    display: inline-block;
    border-radius: 5px;
    background: #6C003C;
    color: #ffffff;
    padding: 0.5em 1em;
  }
  
  
  
  .privacyPolicyBox p{
    line-height: 1.86;
  }
  .privacyPolicyBox p a{
    color: #0060C1;
    text-decoration: none;
  }
  .privacyPolicyBox p a:after{
    display: none;
  }
  .privacyPolicyBox p a:hover{
    text-decoration: underline;
  }
  @media print, screen and (min-width: 768px) {
    .privacyPolicyBox {margin-top: 1.5em; text-align: center;}
    .privacyPolicyBox p{font-size: 1.5rem;}
  }
  @media screen and (max-width: 767px) {
    .privacyPolicyBox {margin-top: 1em;}
    .privacyPolicyBox p{font-size: 1.4rem;}
  }
  
  
  
  .agreementBox {
    text-align: center;
  }
  .agreementBox label span{
    font-size: 1.5rem;
    font-weight: bold;
  }
  .agreementBox + .buttonBox {
    margin-top: 2em;
  }
  @media print, screen and (min-width: 768px) {
    .agreementBox {margin-top: 1.5em;}
    .agreementBox label span{font-size: 1.5rem;}
  }
  @media screen and (max-width: 767px) {
    .agreementBox {margin-top: 2em;}
    .agreementBox label span{font-size: 1.4rem;}
  }
  

input.error:focus,
input.error{
    background: #FFEDF5;
    border-color: #FDC0CB;
}
p.error {
    display: block;
    margin: 0.5em 0 0;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1;
    font-size: 1.4rem;
    color: #ff0000;
    font-weight: bold;
}
p.error:before {
    content: "※";
}
  
  .checkConf {
    display: block;
  }
  
  .month-picker-year-table .ui-button {
    height: auto !important;
  }
  


@media print, screen and (min-width: 768px) {
    .input-size-m{width: 340px;}
  }
  @media screen and (max-width: 767px) {
    .input-size-m{width: 100%;}
  }


/* ====================================================
　countButton
==================================================== */
.countButton{display: flex;}

.countButton__minus,
.countButton__num,
.countButton__plus{
    width: 50px;
    height: 50px;
    text-align: center;
    background: #FAFAFA;
    border-color: #F2F4F5;
    border-style: solid;
    line-height: 50px;
}
.countButton__minus{
    border-radius: 10px 0 0 10px;
    border-width: 1px 0 1px 1px;
}
.countButton__num{
    width: auto;
    min-width: 60px;
    padding: 0 0.75em;
    border-width: 1px 0 1px 1px;
}
.countButton__plus{
    border-radius: 0 10px 10px 0;
    border-width: 1px 1px 0 1px;
}
.countButton__minus img,
.countButton__plus img{
    position: relative;
    top: -0.1em;
    vertical-align: middle;
}



/* ====================================================
　switchButton
==================================================== */
* + .switchButton{margin-top: 1.5em;}
.switchButton{position: relative;}

/*  toggle-round{
-------------------------------------*/
.switchButton input.toggle-round{
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.switchButton input.toggle-round + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
    padding: 2px;
    width: 88px;
    height: 44px;
    background-color: #CDD6DD;
    border-radius: 44px;
}
.switchButton input.toggle-round + label:before,
.switchButton input.toggle-round + label:after {
    display: block;
    position: absolute;
    content: "";
}
.switchButton input.toggle-round + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #CDD6DD;
    border-radius: 40px;
}
.switchButton input.toggle-round + label:after {
    top: 6px;
    left: 6px;
    bottom: 6px;
    width: 32px;
    background-color: #fff;
    border-radius: 32px;
}
.switchButtoninput.toggle-round + label .toggle-text{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.switchButton input.toggle-round + label .toggle-text:before{
    content: "OFF";
    position: absolute;
    z-index: 1;
    right: 1.25em;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

.switchButton input.toggle-round:checked + label {
    background-color: #000000;
}
.switchButton input.toggle-round:checked + label:before {
    background-color: #000000;
}
.switchButton input.toggle-round:checked + label:after {
    margin-left: 44px;
}
.switchButton input.toggle-round:checked + label .toggle-text:before{
    content: "ON";
    right: auto;
    left: 1.75em;
    color: #fff;
}


/*  toggle-square{
-------------------------------------*/
.switchButton input.toggle-square{
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.switchButton input.toggle-square + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
    padding: 2px;
    width: 88px;
    height: 44px;
    background-color: #CDD6DD;
    border-radius: 6px;
}
.switchButton input.toggle-square + label:before,
.switchButton input.toggle-square + label:after {
    display: block;
    position: absolute;
    content: "";
}
.switchButton input.toggle-square + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #CDD6DD;
    border-radius: 6px;
}
.switchButton input.toggle-square + label:after {
    top: 6px;
    left: 6px;
    bottom: 6px;
    width: 32px;
    background-color: #fff;
    border-radius: 4px;
}
.switchButton input.toggle-square + label .toggle-text{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.switchButton input.toggle-square + label .toggle-text:before{
    content: "";
    position: absolute;
    z-index: 1;
    width: 16px;
    height: 16px;
    right: 1em;
    top: 50%;
    background-image: url(../img/contents/share/ico-close.svg);
    background-size: 16px 16px;
    transform: translateY(-50%);
}

.switchButton input.toggle-square:checked + label {
    background-color: #000000;
}
.switchButton input.toggle-square:checked + label:before {
    background-color: #000000;
}
.switchButton input.toggle-square:checked + label:after {
    margin-left: 44px;
}
.switchButton input.toggle-square:checked + label .toggle-text:before{
    right: auto;
    left: 1em;
    background-image: url(../img/contents/share/ico-check.svg);
}


/* ######################################################################################

    ページネーション　.pagenation

###################################################################################### */
@media print, screen and (min-width: 768px) {
.pagenation {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 0;
    position: relative;
    text-align: center;
  }	
  .pagenation li a,
  .pagenation li span {
    display: block;
    text-decoration: none;
    border-radius: 25px;
    min-width: 48px;
    min-height: 48px;
	color: #555;
	line-height: 3.2em;  
  }	
}
@media screen and (max-width: 767px) {
	.pagenation {
    margin-top: 30px;
  	margin-bottom: 30px;
    font-size: 0;
    position: relative;
    text-align: center;
  }	
  .pagenation li {  margin:0 4px;  }	
  .pagenation li a,
  .pagenation li span {
    display: block;
    text-decoration: none;
    border-radius: 19px;
    min-width: 38px;
    min-height: 38px;
	color: #555;
	line-height: 2.5em;  
  }	

}


  .pagenation li {
    font-size: 1.4rem;
    display:inline-block;
    vertical-align:middle;
    margin:0 6px;
  }
  @media screen and (max-width: 767px) {
    .pagenation li {
        font-size: 1.3rem; margin: 0 4px;
    }
    .pagenation li a,
    .pagenation li span{
        line-height: 36px;
    }
  }

  .pagenation li a{
    border: 1px solid #E7EBEF;
    background: #fff;
  }
  .pagenation li span{
    border: 1px solid #009935;
    background: #009935;
    color: #fff;
  }
  .pagenation li a:hover,
  .pagenation li.active a{
    text-decoration: none;
    border: 1px solid #009935;
    background: #ffffff;
    color: #009935;
  }


  .pagenation li.prev{margin-right: 0.75em;}
  .pagenation li.next{margin-left: 0.75em;}

  .pagenation li.prev a,
  .pagenation li.prev span,
  .pagenation li.next a,
  .pagenation li.next span{
    padding: 0.8em 0.25em;
    border: none;
    background: none;
    font-size: 1.3rem;
    color: #000;
}

.pagenation ul li.prev a:hover,
.pagenation ul li.next a:hover,
.pagenation ul li.prev span,
.pagenation ul li.next span{
    background: none;
    color: #ccc;
}

/* ######################################################################################

　SNS埋め込み

###################################################################################### */
.snsTimeLineList li .snsTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #aaa;
  width: 100%;
  padding: 1em 0.75em;
}
.snsTimeLineList li .snsTitle .title{
  margin-bottom: 0;
  color: #fff;
}
/* IE：游ゴシック */
@media all and (-ms-high-contrast: none) {
  .snsTimeLineList li .snsTitle .title{
    font-family: Verdana, "YuGothic Medium", "游ゴシック", YuGothic,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif;;
  }
}

.snsTimeLineList li .snsTitle img{
  position: relative;
  top: -1px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}
.snsTimeLineList li .snsTitle .button{border-radius: 2px;}
.snsTimeLineList li .snsTitle .button:after{display: none;}
.snsTimeLineList li .snsContents {
  max-width: 100%;
  width: 100%;
  height: 560px;
  max-height: 560px;
  text-align: center;
  border: 1px solid #dedede;
  background: #fff;
}

/* スクロール */
.snsTimeLineList li.instagram .snsContents,
.snsTimeLineList li.twitter .snsContents {overflow-y: scroll;}
.snsTimeLineList li .snsTitle .button{padding: 0.5em 1em;}


@media screen and (max-width: 767px) { /* スマホ */
  .snsTimeLineList li .snsTitle {height: 50px;}
  .snsTimeLineList li .snsTitle .title{font-size: 1.3rem;}
  .snsTimeLineList li .snsTitle .button{width: 70px; font-size: 1.1rem;min-width: 70px;}
}
@media print, screen and (min-width: 768px) {  /* PC：768px～ */
  .snsTimeLineList li .snsTitle {height: 70px;}
  .snsTimeLineList li .snsTitle .title{font-size: 1.3rem;}
  .snsTimeLineList li .snsTitle img{display: none;}
  .snsTimeLineList li .snsTitle .button{width: 70px; font-size: 1.1rem; min-width: 70px;}
}
@media print, screen and (min-width: 1280px) { /* PC：1280px～ */
  .snsTimeLineList li .snsTitle .title{font-size: 1.4rem;}
  .snsTimeLineList li .snsTitle img{display: inline-block; width: 25px; height: auto;}
  .snsTimeLineList li .snsTitle .button{width: 90px; font-size: 1.2rem;}
}



/* 色 */
.snsTimeLineList li.facebook .snsTitle{background: #1877F2;}
.snsTimeLineList li.instagram .snsTitle{
  background: #FD0075;
  background: -moz-linear-gradient(left,  #4D2DE6 0%, #FD0075 50%, #FED674 100%);
  background: -webkit-linear-gradient(left,  #4D2DE6 0%, #FD0075 50%, #FED674 100%);
  background: linear-gradient(to right,   #4D2DE6 0%, #FD0075 50%, #FED674 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D2DE6', endColorstr='#FD0075',GradientType=0 );
}
.snsTimeLineList li.twitter .snsTitle{background: #000;}



/* ######################################################################################

      余白など

###################################################################################### */
@media print, screen and (min-width: 768px) {
    .pc_mr100{margin-right: 100px;}
}




/* ######################################################################################

      タグリスト

###################################################################################### */
.roundTagList{display: flex; flex-wrap: wrap;}
.roundTagList .tag{
    display: inline-block;
    margin-right: 0.75em;
    margin-bottom: 0.75em;
    padding: 0.5em 0.75em;
    background-color: #F2F4F5;
    border: 1px solid #CDD6DD;
    line-height: 1;
    border-radius: 2em;
    font-size: 1.2rem;
}





/* ######################################################################################

      accordionList

###################################################################################### */
.accordionList{width: 100%;}
.accordionList__item{border-bottom: 1px solid #BABED1;}
.accordionList__item:first-child{border-top: 1px solid #BABED1;}
.accordionList,
.accordionList__item__first,
.accordionList__item__next{position: relative; width: 100%;}
.accordionList__item__first{
    position: relative;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.accordionList__item__first:before{
    content: "";
    position: absolute;
    top: 40%;
    right: 1em;
    margin: auto;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    border-color: #98A6B5;
    border-style: solid;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.accordionList__item.open .accordionList__item__first:before{
    top: 45%;
    border-width: 3px 0 0 3px;
}

.accordionList__item__next__inner{
    padding: 1.5em 1.25em;
    background-color: #f2f4f5;
    color: #aaaaaa;
    font-size: 1.3rem;
}
.accordionList__item__next__inner p:last-of-type{
    margin-bottom: 0;
}

.borderLinkList{width: 100%;}
.borderLinkList__item{border-bottom: 1px solid #BABED1;}
.borderLinkList__item:first-child{border-top: 1px solid #BABED1;}
.borderLinkList__item a{
    display: block;
    width: 100%;
    padding: 0.75em 1em;
    font-size: 1.6rem;
    background-image: url(../img/contents/share/ico-arrow2.svg);
    background-position: calc(100% - 1em) 50%;
    background-repeat: no-repeat;
    color: #151D35;
    text-decoration: none;
}





/* ######################################################################################

      flowchart

###################################################################################### */
.flowchart{}
.flowchart__item + .flowchart__item{position: relative;}
.flowchart__item + .flowchart__item:before{
    content: "";
    display: block;
    width: 100%;
    height: 30px;
    background-image: url(../img/contents/runner/arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.flowchart__head.greenBgTitle{
    padding: 0.75em 1.25em;
    border-radius: 5px;
}
.flowchart__text{margin-bottom: 0.5em;}
.flowchart__img{margin: 1em 0; text-align: center;}
.flowchart__img img{max-width: 650px; width: 100%; height: auto;}

@media print, screen and (min-width: 768px) {
    .flowchart__item + .flowchart__item:before{margin: 1em 0 1.5em;}
    .flowchart__head.greenBgTitle{font-size: 1.8rem; line-height: 1.5;}
}
@media screen and (max-width: 767px){
    .flowchart__item + .flowchart__item:before{margin: 0.75em 0 1em;}
    .flowchart__head.greenBgTitle{font-size: 1.5rem; line-height: 1.5;}
}

/* ######################################################################################

      〇　丸の番号

###################################################################################### */

.circleNum{ 
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-flow: column;
    margin-right: 0.3em;
    text-indent: -1px;
}

.circleNum.size{
    min-width: 23px;
    height: 23px;
}

.circleNum.green{
    color: #FFFFFF;
    background-color: #009944;
}


/* ######################################################################################

    ブースリスト

###################################################################################### */
body {counter-reset: number;}
.p-okoshiyasu-shop-list {margin-left: 2em}
.p-okoshiyasu-shop-list__item {position: relative; margin-top: 15px}
.p-okoshiyasu-shop-list__item:nth-of-type(1) {margin-top: 0}
.p-okoshiyasu-shop-list__item strong {display: block}

.p-okoshiyasu-shop-list__item::before {
    position: absolute;
    left: 0;
    top: -3px;
    transform: translateX(calc(-100% - 0.25em));
    counter-increment: number; 
    content: counter(number) ".";
	color:#009944;
	font-size: 18px;
	font-weight: bold;
}

@media screen and (min-width: 768px) {
    .p-okoshiyasu-shop-list {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
        padding: 30px 0 30px 30px;
    }
    .p-okoshiyasu-shop-list__item {
        margin-top: 35px;
        width: 48%
    }
    .p-okoshiyasu-shop-list__item:nth-child(even) {margin-left: 4%}
    .p-okoshiyasu-shop-list__item:nth-of-type(2) {margin-top: 0}
}
@media screen and (max-width: 767px){
    .p-okoshiyasu-shop-list {margin-left: 1.5em}
    .p-okoshiyasu-shop-list__item {margin-top: 1em;}
}