@charset "utf-8";

body {
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	line-height: 175%;
	font-feature-settings: "palt";
}

#wrapper{
overflow: hidden;

}

#content{
    width: calc(100% - 40px);
}



h1.page-heading {
    font-size: 18px;
    font-weight: bolder;
    padding: 9px 0 9px 14px;
    margin: 0 0 30px 0;
    border: none;
    background-image: url("../img/common/ttl_heading_bg.png");
    background-repeat: repeat;
    background-position: 0 0;
	line-height: 1.2;
}

#mainvisual {
    margin-bottom: 24px;
}

.mv {
    width: 100%;
    margin-bottom: 30px;
}


#mainvisual p.lead {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 160%;
    text-align: justify;
}




section {
    margin-bottom: 20px;
    line-height: 160%;}



/* section h2.sec_title {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 32px;
} */
section h2.sec_title {
    display: inline-block;
    width: 100%;
    background-color: #188CDF;
    text-align: center;
    color: #FFF;
    font-weight: bolder;
    font-size: 22px;
    border-radius: 8px;
    margin: 0 0 30px 0;
}
section h2.sec_title img{
    width: 100%;

}


@media screen and (max-width:640px){
section h2.sec_title {

	overflow: hidden;
}

section h2.sec_title img{
	width: 100%;
    transform: scale(2.0);
    display: block;
    margin: 0 0 0%;
    padding: 8px 0;
}


}





section .sec_body {
    margin-bottom: 30px;
    padding: 0 0px 0 0px;
	display: flex;
}



#mainvisual .flex_box{
display: flex;
width: 99%;
margin: 0 auto;
}

#mainvisual .flex_box figure{
margin: 0 32px 0 0px;
    width: 240px;
}

#mainvisual .flex_box .sentence{
margin: 0 0px 0 auto;
    width: 100%;
}


section .sec_body .inner{
	width: 490px;
    margin: 0 20px 0 0;
}


section h3{
	color: #00A4D8;
    margin-bottom: 10px;
    vertical-align: middle;
	font-size: 20px;
}
section h3 img{
    width: 13px;
    display: inline-block;
    margin: 0 0 5px 0;
}
section h3 span{
color: #005bac;
    font-size: 20px;
    font-weight: bolder;
    line-height: 1;
    padding: 0px 0 0 4px;
    margin-bottom: 20px;
}






section .sec_body .inner .sentence{
    font-size: 16px;
}


section .sec_body .inner .sentence p{
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 175%;
    text-align: justify;
}
section .sec_body .inner .sentence p.note{
    margin-bottom: 32px;
}



section .sec_body figure{
    width: 250px;
    margin: 0 auto;
}

section .sec_body figure figcaption{
    font-size: 12px;
    margin: 12px 0 0;
}




/* sec_body2 */

section .sec_body2 {
    margin-bottom: 20px;
    padding: 0 0px 0 0px;
    display: flex;
}

section .sec_body2 .inner{
width: 490px;
}

section .sec_body2 .inner .sentence p{
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 175%;
    text-align: justify;
}

section .sec_body2 figure{
width: 290px;
margin: 0 40px 0 0;
}

section .sec_body2 figure figcaption{
margin: 4px 0 0;
font-size: 12px;
}
section .sec_body2 ul.note{

}
section .sec_body2 ul.note > li{
display: flex;

}
section .sec_body2 ul.note > li > span{
display: inline-block;
}
section .sec_body2 ul.note > li > a{
display: flex;
}





/* sec_body3 */

section .sec_body3 {
    margin-bottom: 40px;
    padding: 0 0px 0 0px;
    display: flex;
	justify-content: space-between;
}

section .sec_body3 .inner{
width: 540px;
}



section .sec_body3 .inner .sentence p{
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 175%;
    text-align: justify;
}

section .sec_body3 .inner .sentence p.note{
    font-size: 16px;
}

section .sec_body3 .inner .sentence p .note1{
    font-size: 12px;
}
section .sec_body3 .inner .sentence p .note2{
    font-size: 12px;
}


section .sec_body3 figure{
width: 280px;
margin: 0 40px 0 0px;
}

section .sec_body3 figure figcaption{
margin: 4px 0 0;
font-size: 12px;
}

section .sec_body3 ul.notes{

}
section .sec_body3 ul.notes > li{
display: flex;

}
section .sec_body3 ul.notes > li > span{
display: inline-block;
font-size: 12px;
margin: 0 8px 0 0;
}


@media screen and (max-width:640px){

section .sec_body3 ul.notes{
margin: 0 0px 30px 0px;
}


}


/* sec_body4 */

section .sec_body4 {
    margin-bottom: 20px;
    padding: 0 0px 0 0px;
    display: flex;
	justify-content: space-between;
}

section .sec_body4 .inner{
width: 510px;
}

section .sec_body4 ul.note{

}
section .sec_body4 ul.note > li{
display: flex;

}
section .sec_body4 ul.note > li > span{
display: inline-block;
}
section .sec_body4 ul.note > li >  div > a{
display: flex;
}


section .sec_body4 .inner .sentence p{
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 175%;
    text-align: justify;
}

section .sec_body4 .inner .sentence p.note{
    font-size: 16px;
}

section .sec_body4 figure{
    width: 300px;
    margin: 0 0px 30px 0px;
}

section .sec_body4 figure figcaption{
margin: 4px 0 0;
font-size: 12px;
}

section .sec_body4 .inner .sentence2 p.note{
    font-size: 16px;
}

section .sec_body4 .inner .sentence2 p{
    margin-bottom: 36px;
    font-size: 16px;
    line-height: 175%;
    text-align: justify;
}





/* sentence */

section p.sentence{
    font-size: 16px;
    line-height: 175%;
margin: 0 0px 40px 0px;
text-align: justify;}


.sentence ul li{

}
.sentence ul li span{
    font-weight: bolder;
}

.sentence ul li a{
display: block;
color: #333;
text-decoration: underline;
margin: 0 0 16px 0;
}




/* links */
.links {
    clear: both;
    background: #EFEFEF;
    text-align: center;
    padding: 18px 0 7px 0;
    margin: 20px 0 40px;
}
.links p {
    font-size: 16px;
    text-align: center;
    margin-bottom: 12px;
}
.links a.btn {
    display: inline-block;
    width: calc(100% - 80px);
    background-color: #188CDF;
    text-align: center;
    color: #FFF;
    font-weight: bolder;
    font-size: 16px;
    border-radius: 4px;
    margin: 0 12px 15px 12px;
    padding: 11px 0 11px 0;
    max-width: 310px;
}



/* reference */
.reference {
    margin-bottom: 30px;
	border-top: 1px #333 dashed;
    border-bottom: 1px #333 dashed;
    padding: 20px 0 20px 0;
}

.reference dt {
    font-size: 14px;
    font-weight: bolder;
    margin-bottom: 3px;
	text-align: center;
}

.reference dd {
	    font-size: 13px;
	    margin: 0 0px 0 16px;
		text-align: center;
}

.reference dd span{
display: inline-block;
    margin: 0 0px 0 -16px;
}


.reference dd a{
text-decoration: underline;
    color: #333;
    width: 440px;
    display: inline-block;
		    font-size: 11px;

}


.reference ul li {
    font-size: 12px;
    margin-bottom: 3px;
}


/* comment */
.comment {
    font-size: 20px;
    margin: 40px 0 60px;
    line-height: 175%;
    width: 100%;
    padding-top: 0px;
    text-align: center;

}



.bottom_kanban{
margin-bottom: 20px;

}
.bottom_kanban img{

}

#special14 .basis h4.blue {
    font-size: 16px;
    /* color: #1E7DE5; */
    color: #333;
    padding-bottom: 12px;
    text-align: center!important;
    font-weight: normal!important;
}


#special14 .basis{
margin-top: 27px;
    border-bottom: 1px #333 dashed;
    padding-bottom: 22px;
}
#special14 .basis p{
	text-align: center;
    padding-bottom: 10px;
    font-size: 14px;
}
#special14 .basis p a{
    text-decoration: underline;

}



@media screen and (max-width:640px){

section h3 img {
    width: 15px;
    display: inline-block;
    margin: 0 0 3px 0;
}

#mainvisual .flex_box figure {
display: none;
}
#mainvisual .flex_box .sentence {
    width: 100%;
}

section .sec_body {
    margin-bottom: 32px;
    padding: 0 0px 0 0px;
    display: flex;
	flex-wrap: wrap-reverse;
}

section .sec_body figure {
        width: 45%;
        margin: 0 auto 30px;
}

section .sec_body .inner{
width: 100%;
margin: 0;
}


section .sec_body2 {
        flex-wrap: wrap;
        border-top: 1px #333 dotted;
        padding: 32px 0 0 0;
}
section .sec_body2 figure {
    width: 65%;
    margin: 0 auto 30px;
}

section .sec_body3 {
        flex-wrap: wrap-reverse;
}
section .sec_body3 figure {
    width: 82%;
    margin: 0 auto 30px;
}

section .sec_body4 {
        flex-wrap: wrap-reverse;
}
section .sec_body4 figure {
    width: 65%;
    margin: 0 auto 30px;
}





.comment {
font-size:clamp(14px, 3.3vw, 16px);
        text-align: left;
}





.links {
    clear: both;
    background: #EFEFEF;
    text-align: center;
    padding: 18px 0 7px 0;
    margin: 40px 0 40px -50%;
    width: 200%;
}


.links p {
font-size: clamp(14px, 3.3vw, 16px);
    text-align: center;
    margin-bottom: 12px;
}

.reference dd {
}
.reference dd a{
        display: block;
        word-break: break-all;
        width: 100%;
}


}



















/* JS用 */

/* 基本的なフェードイン */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
}

/* 上からスライド */
.slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 左からスライド */
.slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease;
}

.slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* 右からスライド */
.slide-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease;
}

.slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* スケールアップ */
.scale-up {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease;
}

.scale-up.visible {
    opacity: 1;
    transform: scale(1);
}

/* 回転 */
.rotate-in {
    opacity: 0;
    transform: rotate(45deg) scale(0.8);
    transition: all 0.8s ease;
}

.rotate-in.visible {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}