@charset "utf-8";

/* ResetCSS
----------------------------------------------------------------*/
/* 要素 フォントサイズ・マージン・パディングをリセット */
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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font-weight: normal;
    vertical-align:baseline;
    background:transparent;
    }
/* 行の高=フォントサイズ */
body {line-height:1;}
/* 新規追加要素をブロック要素化 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}
/* ulのマーカー非表示 */
ol, ul {list-style: none;}
/* 引用符の非表示 */
blockquote, q {quotes:none;}
/* blockquote要素、q要素の前後にコンテンツ非表示 */
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
    }
/* フォントサイズ　リセット フォントの縦方向 ベースライン揃え 点線削除 */
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    outline: none;
    }
/* ins要素 デフォルトセット 色を変える場合はここで変更 */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
    }
/* mark要素 デフォルトセット 色やフォントスタイルを変える場合はここで変更 */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
    }
/* テキスト 打ち消し線 */
del {text-decoration: line-through;}
/* IE　デフォルトで点線を下線表示設定　下線設定 マウスオーバー時 ヘルプカーソル表示可 */
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
    }
/*　隣接するセルのボーダーを重ねて表示　*/
table {
    border-collapse:collapse;
    border-spacing:0;
    }
/* 水平罫線デフォルトリセット */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
    }
/* 縦方向の揃え 中央揃え */
input, select {vertical-align:middle;}
/* 画像を縦に並べた時に余白0 */
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    }
/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    }
.clearfix:after {
	overflow: hidden;
	visibility: hidden;
	height: 0;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
    }
br {line-height: inherit;}


/* html5 base style
----------------------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,address,code,em,img,a,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,canvas,figcaption,figure,footer,header,menu,nav,main,section,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    }
article,aside,figcaption,figure,footer,header,menu,nav,main,section {display: block;}
ol,ul {list-style: none;}
a {text-decoration: none;color: #333;}
img,svg,video {
    width: auto;
    max-width: 100%;
    vertical-align: bottom;
    }
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
input,
select {vertical-align: middle;}
input,select,button {
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    }
input:focus,select:focus,button:focus {outline: 0;}



/* module style
----------------------------------------------------------------*/
html {
    overflow: auto;
    font-size: 62.5%;
    }
body {
    font-size: 1.6rem;
    font-weight: 400;
    background: #fff;
    color: #262626;
    font-family: "Zen Kaku Gothic New", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: auto;
    overflow: hidden;
    position: relative;
    }
p,a,li,dt,dd,h3,h4,h5 {
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0;
    }



/* layout
----------------------------------------------------------------*/
.inner {
    max-width: calc(1280px + 2%);
    margin: 0 auto;
    padding: 0 1%;
    }
.flex {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    }
.flexwrap {
    flex-wrap: wrap;
    width: 100%;
    }
.flex-nml {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-wrap:wrap;
    }
.flex-btw {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-wrap:wrap;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    }
.flex-cnt {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-wrap:wrap;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    }
.flex-end {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-wrap:wrap;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    }
.row-reverse {
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
    }
.items-center {
	-webkit-align-items: center;
	align-items: center;
    }
.items-start {
	-webkit-align-items: flex-start;
	align-items: flex-start;
    }
.items-end {
	-webkit-align-items: flex-end;
	align-items: flex-end;
    }
.jc-between {justify-content: space-between;}
.jc-around {justify-content: space-around;}
.jc-center {justify-content: center;}
.jc-end {justify-content: flex-end;}

.w-20 {width: 20%;}
.w-25 {width: 25%;}
.w-45 {width: 45%;}
.w-70 {width: 70%;}

@media screen and (max-width:1040px) {
    body{font-size: 1.5rem;}
    .inner {padding: 0 3%;}
    }
@media screen and (max-width:768px) {
    body {font-size: 1.4rem;}
    .inner {padding: 0 5%;}
    .flex {display: block;}
    }



/*【共通】parts
----------------------------------------------------------------*/
/* link */
a,
a * {
	-webkit-transition: opacity 0.6s ease;
	-moz-transition: opacity 0.6s ease;
	-o-transition: opacity 0.6s ease;
	transition: opacity  0.6s ease;
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	font-family: inherit;
	-webkit-backface-visibility: hidden; /* 追加 */
	backface-visibility: hidden; /* 追加 */
    }
a:hover, a:active {
	text-decoration:none;
	opacity: 0.7;
	filter: alpha(opacity=70);
    }
img {
	max-width: 100%;
	height: auto;
    }
.over_effect {width: 100%;overflow: hidden;}
.over_effect a {text-decoration: none;}
.over_effect img{transition: 0.7s;}
.over_effect a:hover img {
	display: block;
	transform: scale(1.1, 1.1);
	transition-duration: 0.8s;
	}



/* text */
.font-en {font-family: "Roboto", sans-serif;}

.wr-vt {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    }
.bold {font-weight: bold;}
.al_center {text-align: center;}
.al_right {text-align: right;}
.al_left {text-align: left;}


/* color */
.co_br {color: #003c79;}

/* list */
.list-style {list-style: disc;}
.scale {transition: 0.5s;}
.scale:hover {transform: scale(1.1);transition: 0.5s;}


/* 表示切り替え */
.pconly {display: block;}
.sponly {display: none;}
.tbonly {display: none;}
@media screen and (max-width: 1023px) {
    .tbonly {display: block;}
    }
@media screen and (max-width: 768px) {
    .pconly {display: none;}
    .sponly {display: block;}
    .spnone{display: none;}
    }


/* 配置 */
.m-auto {margin: auto;}
.ps-r {position: relative;}
.ps-a {position: absolute;}



/*============================
	header
============================*/

header{}
.hd__inner {}
.hd__logo {
    width: 96%;
    max-width: 1280px;
    height: 90px;
    padding: 10px 0;
    margin: auto;
    }
@media screen and (max-width:1040px) {}
@media screen and (max-width:768px) {

.hd__logo {
    width: 20%;
    max-width: 1280px;
    height: inherit;
    padding: 10px;
    margin: auto 0;
    }   
.hd__logo img{max-width:40px;} 
    
}


/*============================
	footer
============================*/

footer {
    background: #242424;
    color: #fff;
    padding: 40px 0;
    }
.ft__flex {}
footer .ft__logo {
    width: 50%;
    }
footer .ft__logo .logo{
    display: block;
    width: 45%;
    max-width: 120px;
    }
footer .ft__info{}
footer .ft__info p{
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: 1.5;
    display: block;
    margin-bottom:15px;
    }
.ft__nav {
    width: 50%;
    margin: 0;
    text-align: right;
    }
.ft__copyright {
    font-size: 1.3rem;
    letter-spacing: .05em;
    text-align: right;
    margin-top: 40px;
    }


@media screen and (max-width:1040px) {}
@media screen and (max-width:768px) {

footer {
    padding: 30px 0 20px;
    }
.ft__flex {}
footer .ft__logo {
    width: 100%;
     text-align: center;
    }
footer .ft__logo .logo{
    display: block;
    width: 100%;
    max-width: 50px;
    margin: auto;
    }
footer .ft__info{}
footer .ft__info p{
    margin-bottom:10px;
    }
.ft__nav {
    margin-top: 15px;
    width: 100%;
    text-align: center;
    }
.ft__copyright {
    font-size: 1.2rem;
    text-align: center;
    margin-top: 20px;
    }
}




/*============================
	page top
============================*/
#page-top {
    position: fixed;
    bottom: 20px;
    right:20px;
    white-space: nowrap;
    text-align: center;
    width: 21px;
    display: block;
    margin: 0 auto;
    z-index: 99;
    }
#page-top {
    opacity: 0;
    transition: .5s;
    }
#page-top.active {opacity: 1;}
@media screen and (max-width:1040px) {
    #page-top {width: 20px;}
    }
@media screen and (max-width:768px) {
    #page-top {width: 10px;}
    }



/* 背景色の動きのCSS
----------------------------------------------------------------*/
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {opacity: 0;}
/* 背景色が伸びて出現 共通 */
.bgextend {
    animation-name: bgextendAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    position: relative;
    overflow: hidden;
    /*　はみ出た色要素を隠す　*/
    opacity: 0;
    z-index: 9999;
    }
.fv.bgextend {overflow: unset;}
@keyframes bgextendAnimeBase {
    from {opacity: 0;}
    to {opacity: 1;}
    }
/* 中の要素 */
.bgappear {
    animation-name: bgextendAnimeSecond;
    animation-duration: 1s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
    opacity: 0;
    height: 100%;
    display: block;
    }

@keyframes bgextendAnimeSecond {
    0% {opacity: 0;}
    100% {opacity: 1;}
    }

/* 左から出現 */
.bgLRextend::before {
    animation-name: bgLRextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1337E6;
    /*伸びる背景色の設定*/
    z-index: 9999;
    }
@keyframes bgLRextendAnime01 {
    0% {width: 0%;}
    100% {width: 100%;}
}
@keyframes bgLRextendAnime {
    0% {
        transform-origin: left;
        transform: scaleX(0);
        }
    50% {
        transform-origin: left;
        transform: scaleX(1);
        }
    50.001% {
        transform-origin: right;
        }
    100% {
        transform-origin: right;
        transform: scaleX(0);
        }
    }


/*【個別】parts
----------------------------------------------------------------*/
/* 吹き出し */
.section__pop {
    padding: 30px 3%;
    width: 100%;
    background: #f5f2e2;
    font-weight: bold;
    display: inline-block;
    position: relative;
    border-radius: 10px;
    z-index: 9;
    }
.section__pop::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 26px 11px 0;
    border-color: transparent #f5f2e2 transparent transparent;
    top: 40%;
    left: -12px;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    }
.section__pop.color02 {background: #e9f2f5;}
.section__pop.color02::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 26px;
    border-color: transparent transparent transparent #e9f2f5;
    left: auto;
    right: -38px;
    }


.marker {
    position: relative;
    z-index: 1;
    }
.marker::after {
    position: absolute;
    content: "";
    background: #ffe867;
    width: 115%;
    height: 25px;
    bottom: -5px;
    left: 50%;
    z-index: -1;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    }

/* 伸びる線 */
.stretch_border::after {
    content: "";
    width: 0;
    height: 1px;
    background: #d81626;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: .7s;
    }

/* hover zoom */
/*　画像の拡大　*/
.zoomIn img {
    transform: scale(1);
    transition: .5s ease-in-out;
    /*移り変わる速さを変更したい場合はこの数値を変更*/
    }
.zoomIn:hover img {
    /*hoverした時の変化*/
    transform: scale(1.05);
    /*拡大の値を変更したい場合はこの数値を変更*/
    }
.mask {
    display: block;
    line-height: 0;
    /*行の高さを0にする*/
    overflow: hidden;
    /*拡大してはみ出る要素を隠す*/
    }