@charset "utf-8";
/*----------------------------------------------------
 elements
----------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
 {
     font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /*font-family: -apple-system, blinkMacSystemFont, 
              'Noto Sans JP',
               'Helvetica Neue',
               'Segoe UI',
               YuGothicM,
               YuGothic,
               Meiryo,
     sans-serif;*/
     color: #333;
     -webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
}


.min {
	-webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
    font-family: "Noto Serif JP","游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
     color: #333;
}
.gothic {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
     color: #333;
}

.yu_min {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}


a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	text-decoration: none;
    transition: 0.3s;
}

img {
	vertical-align: bottom;
    max-width: 100%;
}

li {
	list-style: none;
}


/*
====================================================
 clearfix
====================================================
*/
.clearfix:after { content: ''; display: block; clear: both; }

.cf {overflow: hidden;}

.clear{
	clear:both;
	font-size:0;
	line-height:0;
	padding:0;
	margin:0;
}

.clearB {clear: both;}

/* ================================================
		float settings
================================================== */
.floatL {
	float:left;
}
.floatR {
	float:right;
}


/*    ▼fade in
スクロールで表示（jquery.inview.js）
====================================*/
.fade {
    overflow: hidden;
    transition: 1s;
    opacity: 1;
    transition-delay: 0.1s;
}
.move {
    overflow: hidden;
    transition: 1s;
    opacity: 0;
    transition-delay: 0.1s;
}

.slow {
    overflow: hidden;
    transition: 0.8s;
    opacity: 0;
    transition-delay: 0.2s;
    transform:translateY(50px);
}

.view {
    opacity: 1 !important;
    transform:translateY(0px);
}


/* ================================================
	矢印
================================================== */
/*白矢印*/
.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #fff;
vertical-align: middle;
text-decoration: none;
transition:0.3s;
}
.arrow::before,
.arrow::after{
position: absolute;
top: -1px;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.arrow::before{
width: 4px;
height: 4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition:0.3s;
}
.arrow:hover::before{
    left:2px;
}


/*注釈*/
.att {
    max-width: 1100px;
    width:94%;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    margin: 20px auto;
}
.att_k {
    max-width: 1100px;
    width: 94%;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    padding-bottom: 40px;
    margin: 0 auto;
    -webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
    font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/*        860px以下　SP　注釈
=========================================*/
@media only screen and (max-width : 980px ){
    .att {
        max-width: 90%;
        padding-bottom: 20px;
        margin: 0 5% 0px;
    }
    .att_k {
        max-width: 96%;
        padding-bottom: 30px;
        margin: 0 auto 0px;
    }
}

/* ================================================
	caption
================================================== */
span.caption {
    position: absolute;
    right: 7px;
    bottom: 7px;
    font-size: 11px;
    letter-spacing: 1px;
    text-shadow:0px 0px 5px #000000,0px 0px 10px #2e2e2e;
    color: #FFFFFF;
}
span.caption.cap_b {
    text-shadow:0px 0px 5px #fff,0px 0px 10px #fff;
    color: #000;
}
/*        860px以下　SP
=========================================*/
@media only screen and (max-width : 980px ){
    span.caption {
        bottom: 7px;
        right: 5px;
    }
}


/* ================================================
	table
================================================== */
table {
	border-collapse: collapse;
	border-spacing: 0px;
}



/* ================================================
両はしに罫線
================================================== */
.kei {
    max-width: 1200px;
    margin: 50px auto 30px;
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    display: flex;
    align-items: center;
}
.kei:before, .kei:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background:#fff;
    display: block;
}
.kei:before {
    margin-right: .8em;
}
.kei:after {
    margin-left: .8em;
} 



/* ================================================
flex settings
================================================== */
ul.flex {
    display: flex;
    flex-wrap: wrap;
}
ul.flex li.flex1-1 {
    width:100%;
}
ul.flex li.flex2-1 {
    width:48%;
}
ul.flex li.flex3-1 {
    width:32%;
}
ul.flex li.flex3-2 {
    width:66%;
}
ul.flex li.flex4-1 {
    width:23.5%;
}
ul.flex li.flex4-3 {
    width:74.5%;
}
ul.flex li.flex5-1 {
    width:20%;
}
ul.flex li.flex5-2 {
    width:40%;
}
ul.flex li.flex5-3 {
    width:58%;
}




/* -------------------------------
	for smartphone
	960px以内
------------------------------- */
@media only screen and (max-width : 980px ){
    
    .pc { display: none !important;}
    .sp { display:block;}
}


/* -------------------------------
	for pc
	861px以上
------------------------------- */
@media only screen and (min-width : 981px ){
    
    .pc { display: block;}
    .sp { display: none !important;}

}