@charset "UTF-8";
/*------------------------------------------------------------
Default
------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header, button,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
}

html {
  	font-size: 62.5%;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

body, table,
input, textarea, select, option, button,
h1, h2, h3, h4, h5, h6 {
    font-family: メイリオ, Meiryo, 'KozGoPr6N-Medium', 'KozGoPr6N-Heavy', 'KozGoPro-Bold', 'KozGoPro-Heavy';
    /* font-family: 'メイリオ', Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
	line-height: 1.1;	
}

table, input, textarea, select, option {
  	line-height: 1.1;
}

ol, ul {
  	list-style: none;
}

blockquote, q {
  	quotes: none;
}

:focus {
  	outline: 0;
}

ins {
  	text-decoration: none;
}

del {
  	text-decoration: line-through;
}
.f_t_flex{
		display: flex !important;
}
.pdl_0{
	padding-left:0 !important;
}
img {
	max-width: 100%;
	vertical-align: middle;
}
/* ////////////// link param change ///////////////// */
a {
	/* display: block;	 */
	text-decoration: none;
	cursor: pointer;
	/* color: #706940; */
}
.mb_0{
	margin-bottom:0px !important;
}
.mb_50{
	margin-bottom:50px;
}
.pb_0{
	padding-bottom:0px !important;
}
.pb_50{
	padding-bottom: 50px;
}
.full-container{
	width: 100%;
}
.grey{
	background:#eaeaea; 
}
.pink{
	background:#ffddd3;
}
a:hover {	
	/* color: red; */
	transition: 0.5s;
	opacity : 0.5;
    -ms-filter : "alpha( opacity=70 )";
        filter : alpha( opacity=70 );
}

a:link {  
	/* color: #00ff4c; */
	/* text-decoration: underline; */
}
a:visited {
	/* color: #00ff4c; */
}
a:active {
	/* color: #00ff4c; */
}

/*------------------------------------------------------------
	clearfix（float解除）
------------------------------------------------------------*/
.clearfix {
  	*zoom: 1;
}

.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
    content: ".";
}

/*// css for Layout*/
/*// Can use id, If you use class Please adding prefix .l- */
/*------------------------------------------------------------
	Layout
	------------------------------------------------------------*/
body {
	/* ウインドウ幅で横スクロール時に背景が切れるバグ対策でコンテンツと同じ幅を指定 */
	width: 100%;
}
.only-sp {
	display: none;
}
@media screen and (max-width: 768px) {
	.only-pc {
		display: none !important;
	}
	.only-sp {
		display: block !important;
	}
}

/* Fancy View - Section_01, whatBlock */
#modal1, #modal2, #modal3, #modal4,
#modal5, #modal6, #modal7, #modal8,
#modal9, #modal10, #modal11, #modal12,
#modal13, #modal14, #modal15, #modal16, #modal17, 
#what1, #what2, #what3, #what4,
#what5, #what6, #what7, #what8 {
    display: none;
    width: 100%;
    max-width: 500px;
    padding: 4rem 2rem 0;
    text-align: justify;
    border-radius: 3px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.what .fancybox-close-small,
.modal .fancybox-close-small {
    top: 15px;
}
.what .content-header,
.modal .content-header {
    width: 100%;
    background: #036EB7;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    font-family: KozGoPro-Medium;
    font-size: 1.6rem;
    line-height: 2rem;
    color: white;
}
.what .content-header img,
.modal .content-header img {
    margin-right: 1rem;
}
.section01.what .content-header {
    background: none;
    color: #036EB7;
    font-size: 2rem;
    text-align: center;
}
.section02.what .content-header {
    background: none;
    color: #077679;
    font-size: 2rem;
    line-height: 3rem;
    text-align: center;
}
.what .content-scroll,
.modal .content-scroll {
    font-family: KozGoPro-Regular;
    font-size: 1.6rem;
    line-height: 3rem;
    max-height: calc(100vh - 50rem);
    overflow: auto;
    padding: 40px 20px 0 20px;
}
.modal .content-scroll .taglabel {
    padding: 5rem 0 0;
    font-family: KozGoPro-Medium;
}
.modal .content-scroll .addcomment {
    background: #EEEEEE;
    max-width: 90vw;
    padding: 2rem;
    margin: auto;
    font-size: 1.2rem;
    line-height: 2.5rem;
}
.modal .content-scroll .addcomment ul {
    padding: 0 0 0 1rem;
}
.modal .content-scroll .addcomment ul li {
    padding: 0.5rem 0;
}
.modal .content-scroll .addcomment .dash_box {
    width: calc(100% + 2rem);
    transform: translateX(-1rem);
    padding: 2rem;
    margin: 2rem auto;
    border: dashed #036EB7 2px;
}
.modal .content-scroll .addcomment .rect {
    list-style-image: url('../img/ul_dot1.png');
}
.modal .content-scroll .addcomment .circle {
    list-style-image: url('../img/ul_dot2.png');
}
.modal .content-scroll .addcomment .shape {
    list-style-image: url('../img/ul_dot3.png');
}
.lg_container .btn,
.what .btn,
.modal .btn {
    cursor: pointer;
    display: block;
    padding: 0 4rem;
    background: #1D2087;
    font-family: KozGoPro-Bold;
    font-size: 2rem;
    line-height: 4rem;
    color: white;
    text-align: center;
    margin: 5rem auto;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .what .content-header,
    .modal .content-header {
        line-height: 0;
        padding: 1rem 2rem 0.8rem;
    }
    .what .btn,
    .modal .btn {
        cursor: pointer;
        display: block;
        padding: 1.5rem 4rem 0.5rem;
        background: #1D2087;
        font-family: KozGoPro-Bold;
        font-size: 2rem;
        /* line-height: 4rem; */
        color: white;
        text-align: center;
        margin: 5rem auto;
    }
}
@media screen and (max-width: 768px) {
    #modal1, #modal2, #modal3, #modal4,
    #modal5, #modal6, #modal7, #modal8,
    #modal9, #modal10, #modal11, #modal12,
    #modal13, #modal14, #modal15, #modal16, #modal17, 
    #what1, #what2, #what3, #what4,
    #what5, #what6, #what7, #what8 {
        padding: 9vw 5vw 0;
        max-height: 80vh;
    }
    .what .content-scroll,
    .modal .content-scroll {
        font-family: KozGoPro-Regular;
        font-size: 3vw;
        line-height: 6vw;
        max-height: calc(80vh - 20vh);
        overflow: auto;
        padding: 5vw;
    }
    .what .btn,
    .modal .btn {
        cursor: pointer;
        display: block;
        padding: 0 10vw;
        background: #1D2087;
        font-family: KozGoPro-Bold;
        font-size: 4vw;
        line-height: 10vw;
        color: white;
        text-align: center;
        margin: 10vw auto;
    }
}