/*
PCフォントサイズ
・サイトタイトル　40px
・大見出し　20px
・中見出し　20px　
・小見出し
・本文　14px
・注釈　12px
・コンテンツマージン　40px 10px
・コンテンツ内マージン　20px 20px 0 20px　
*/

@import url("reset.css");
@import url("hamburger-menu.css");

body{ width: 100%; margin: auto; letter-spacing: 0.1em;}
.clearfix { *zoom: 1;}
.clearfix:before,
.clearfix:after { display: table; line-height: 0; content: "";}
.clearfix:after { clear: both;}
.forPC{ display: block;}
.forSP{ display: none !important;}
p{ font-size: 14px; font-weight: normal; letter-spacing: 0.1em; text-align: left; color: #2b2b2b;}
.indent-1 { padding-left:1.2em; text-indent:-1.2em;}
.indent-15 { padding-left:1.5em; text-indent:-1.5em;}
a{ text-decoration: none; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; outline: none; color: #2b2b2b;}
a:hover{ transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; opacity: .6;}
a.none{ pointer-events: none;}


header{ width: 100%; overflow: hidden; z-index: 1;}
header > ul.language{ display: flex; justify-content: flex-start; list-style: none; padding: 14px 10px 16px; margin-bottom: 0px !important;}
header ul.language li{ overflow: hidden; margin: 0 4px; display: inline-block;}
header ul.language li a{ display: inline-block; padding: 4px 10px 3px; box-sizing: border-box; font-size: 14px; color: #fff; text-decoration: none; background-color: #0063af; border-radius: 4px; border-bottom: 2px solid #003b5f; letter-spacing: 0;}


/*=======================*/
section.mv-area{ width: 100%; max-width: 100%; margin: auto auto auto; padding: 0 0 0; position: relative; overflow: inherit;}
section.mv-area .inner-head{ width: 100%; margin: auto auto; background-color: #d1e9fb; padding: 40px 10px; box-sizing: border-box;}
section.mv-area .inner-head > .title{ width: 100%; max-width: 310px; overflow: hidden; margin: auto auto;}
section.mv-area .title-bottom{ width: 100%; height: 2px; background-color: #0063af; position: relative;}
section.mv-area .title-bottom::after{ content: ""; width: 60px; height: 20px; position: absolute; top: 0; left: 0; right: 0; margin: auto auto; background-image: url(../images/title-bottom.png); background-position: center center; background-size: 60px; background-repeat: no-repeat;}
/*=======================*/
section{ width: 100%; max-width: 880px; margin: 40px auto auto; padding: 0 10px; box-sizing: border-box; overflow: hidden;}
section .inner{ width: auto; overflow: hidden; margin-left: auto; margin-right: auto;}
section .inner p.note{ font-size: 14px; color: #e04878;}

a.btn01{ display: inline-block; font-size: 14px; font-weight: bold; color: #0063af; overflow: hidden; border: 1px solid #0063af; border-radius: 3px; box-sizing: border-box; padding: 2px 30px 2px 20px; position: relative;}
a.btn01::after{ content: ""; display: block; position: absolute; top: 0; right: 4px; bottom: 0; margin: auto auto; width: 10px; height: 10px; background-image: url(../images/icon-02.svg); background-repeat: no-repeat; background-position: center center;}
/*=======================*/
section.introduction-area .inner{ display: table;}
section.introduction-area .inner:nth-child(2){ margin-top: 20px;}
section.introduction-area .inner .img-box{ width: 103px; display: table-cell;}
section.introduction-area .inner .img-box img{ width: 100%; display: block;;}
section.introduction-area .inner .txt-box{ display: table-cell; vertical-align: middle; padding-left: 30px;}
section.introduction-area .inner .txt-box h2{ font-size: 20px; font-weight: bold;}
section.introduction-area .inner .txt-box p{ font-size: 14px;}
/*=======================*/
section.area01 .inner h2{ padding: 10px 20px 9px; box-sizing: border-box; font-size: 20px; line-height: 1.2; font-weight: bold; color: #fff; text-decoration: none; background-color: #0063af; border-radius: 8px; text-align: center;}
section.area01 .inner .wrap{ width: 100%; overflow: hidden; padding: 20px 10px 0; box-sizing: border-box;}
section.area01 .inner ul{ width: 100%; overflow: hidden;}
section.area01 .inner ul li{ padding: 6px 0 6px 12px; box-sizing: border-box; position: relative;}
section.area01 .inner ul li::before{ content: ""; width: 4px; height: 4px; background-color: #2b2b2b; border-radius: 20px; top: 15px; left: 0; margin: auto auto; position: absolute;}
section.area01 .inner ul li > div{ display: table; height: 100%;}
section.area01 .inner ul li > div p{ display: table-cell; font-size: 14px; vertical-align: middle; padding-right: 10px;}
section.area01 .inner ul li > div a.btn01{ display: table-cell; vertical-align: middle;}
section.area01 .inner p.note{ margin-top: 6px;}
section.area01 .inner p a{ text-decoration: underline;}
section.area01 .inner .box hr{ border-top: 2px dashed #c8d2e3; margin: 20px 0;}
/*=======================*/
section.area02 .inner h2{ padding: 10px 20px 9px; box-sizing: border-box; font-size: 20px; oteline-height: 1.2; font-weight: bold; color: #fff; text-decoration: none; background-color: #0063af; border-radius: 8px; text-align: center;}
section.area02 .inner .wrap{ width: calc(100% - 20px); margin: 40px 10px 0; padding: 32px 20px; box-sizing: border-box; border-radius: 8px; background-color: #f4f4f4; position: relative;}
section.area02 .inner .wrap .step{ display: inline-block; width: 100%; max-width: 80px; position: absolute; top: -13px; left: 13px; margin: auto auto;}
section.area02 .inner .wrap .step img{ width: 100%;}
section.area02 .inner .wrap .s01-01{ width: 100%; overflow: hidden; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 3px dashed #fff;}
section.area02 .inner .wrap .s01-01 .url-qr{ width: 100%; overflow: hidden; display: table;}
/*section.area02 .inner .wrap .s01-01 .url-qr p{ display: table-cell; vertical-align: middle;}*/
section.area02 .inner .wrap .s01-01 .url-qr p a,
section.area02 .inner .wrap .s01-02 .url-qr p a{ text-decoration: underline; color: #0063af;}
section.area02 .inner .wrap .s01-01 .url-qr div{ display: table-cell; vertical-align: middle; width: 100px; padding-left: 10px; box-sizing: border-box;}
section.area02 .inner .wrap .s01-01 h3,
section.area02 .inner .wrap .s01-02 h3{ font-size: 20px; font-weight: bold;}
section.area02 .inner .wrap .s01-01 p,
section.area02 .inner .wrap .s01-02 p{ margin-top: 10px;}
section.area02 .inner .wrap .s02-01{ display: table;}
section.area02 .inner .wrap .s02-01 .img-box{ display: table-cell; vertical-align: middle; width: 70px;}
section.area02 .inner .wrap .s02-01 .txt-box{ display: table-cell; vertical-align: middle; padding-left: 20px; box-sizing: border-box;}
section.area02 .inner .wrap .s02-01 .txt-box h3{ font-size: 20px; font-weight: bold;}
section.area02 .inner .wrap .s03-01{ display: table;}
section.area02 .inner .wrap .s03-01 .img-box{ display: table-cell; vertical-align: top; width: 100px;}
section.area02 .inner .wrap .s03-01 .img-box img:nth-child(1){ display: block; float: left;}
section.area02 .inner .wrap .s03-01 .img-box img:nth-child(2){ display: block; float: right;}
section.area02 .inner .wrap .s03-01 .txt-box{ display: table-cell; vertical-align: top; padding-left: 20px; box-sizing: border-box;}
section.area02 .inner .wrap .s03-01 .txt-box h3{ font-size: 20px; font-weight: bold;}
section.area02 .inner .wrap .s03-01 .txt-box .w-box{ width: 100%; overflow: hidden; background-color: #fff; padding: 10px 20px; box-sizing: border-box; border-radius: 8px; margin-top: 10px;}
section.area02 .inner .wrap .s03-01 .txt-box .w-box:last-child{ margin-top: 4px;}
section.area02 .inner .wrap .s03-01 .txt-box .w-box .img-box{ vertical-align: middle; width: 42px;}
section.area02 .inner .wrap .s03-01 .txt-box .w-box .txt-box{ vertical-align: middle;}
section.area02 .inner .wrap h4{ font-size: 20px; font-weight: bold; text-align: center;}
section.area02 .inner .wrap .s04-01{ display: table; width: 100%; margin: 20px 0; padding-bottom: 20px; border-bottom: 3px dashed #fff;}
section.area02 .inner .wrap .s04-01 .img-box{ display: table-cell; vertical-align: top; width: 100px;}
section.area02 .inner .wrap .s04-01 .img-box img:nth-child(1){ display: block; float: left;}
section.area02 .inner .wrap .s04-01 .img-box img:nth-child(2){ display: block; float: right;}
section.area02 .inner .wrap .s04-01 .txt-box{ display: table-cell; vertical-align: top; padding-left: 20px; box-sizing: border-box;}
section.area02 .inner .wrap .s04-01 .txt-box h3{ font-size: 20px; font-weight: bold; color: #0063af; border-bottom: 2px solid #0063af; display: block;}
section.area02 .inner .wrap .s04-01 .txt-box ul{ width: 100%; max-width: calc(100% - 100px); overflow: hidden; margin-top: 8px; float: left;}
section.area02 .inner .wrap .s04-01 .txt-box ul li{ padding: 2px 0 2px 12px; box-sizing: border-box; position: relative;}
section.area02 .inner .wrap .s04-01 .txt-box ul li::before{ content: ""; width: 4px; height: 4px; background-color: #2b2b2b; border-radius: 20px; top: 0; left: 2px; bottom: 0; margin: auto auto; position: absolute;}
section.area02 .inner .wrap .s04-01 .txt-box ul li.none{ padding-left: 0;}
section.area02 .inner .wrap .s04-01 .txt-box ul li.none::before{ display: none;}
section.area02 .inner .wrap .s04-01 .txt-box div{ float: right; width: 100px; margin-top: 10px}
section.area02 .inner .wrap .s04-02{ display: table; width: 100%;}
section.area02 .inner .wrap .s04-02 .img-box{ display: table-cell; vertical-align: top; width: 70px;}
section.area02 .inner .wrap .s04-02 .txt-box{ display: table-cell; vertical-align: top; padding-left: 20px; box-sizing: border-box;}
section.area02 .inner .wrap .s04-02 .txt-box h3{ font-size: 20px; font-weight: bold; color: #0063af; border-bottom: 2px solid #0063af; display: block;}
section.area02 .inner .wrap .s04-02 .txt-box ul{ width: 100%; max-width: calc(100% - 100px); overflow: hidden; margin-top: 8px; float: left;}
section.area02 .inner .wrap .s04-02 .txt-box ul li{ padding: 2px 0 2px 12px; box-sizing: border-box; position: relative;}
section.area02 .inner .wrap .s04-02 .txt-box ul li::before{ content: ""; width: 4px; height: 4px; background-color: #2b2b2b; border-radius: 20px; top: 0; left: 2px; bottom: 0; margin: auto auto; position: absolute;}
section.area02 .inner .wrap .s04-02 .txt-box div{ float: right; width: 100px; margin-top: 10px}
section.area02 .inner .wrap .s04-02 .txt-box p.note:nth-child(3){ margin-top: 10px;}
section.area02 .inner .wrap .s04-02 .txt-box ul:nth-child(4){ margin-top: 0;}
section.area02 .inner .btn-box{ width: 100%; max-width: 90%; margin: 40px auto 0;}
section.area02 .inner .btn-box p.pink{ font-size: 18px; color: #e04878; text-align: center;}
section.area02 .inner .btn-box p.pink a{ text-decoration: underline; color: #e04878;}
section.area02 .inner .btn-box a.btn01{ width: 100%; font-size: 20px; font-weight: bold; padding: 10px 40px 10px 20px; border: 2px solid #0063af; border-radius: 4px; margin-top: 6px;}
section.area02 .inner .btn-box a.btn01::after{ right: 20px; width: 16px; height: 16px;}
section.area02 .inner .btn-box p.note{ text-align: center;}
/*=======================*/
section.area03 .inner h2{ padding: 10px 20px 9px; box-sizing: border-box; font-size: 20px; line-height: 1.2; font-weight: bold; color: #fff; text-decoration: none; background-color: #0063af; border-radius: 8px; text-align: center;}
section.area03 .inner .wrap{ width: calc(100% - 20px); margin: 40px 10px 0; padding: 20px 10px; box-sizing: border-box; background-color: #dff2fc; border-top: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b; display: table;}
section.area03 .inner .wrap .txt-box{ display: table-cell; vertical-align: middle;}
section.area03 .inner .wrap .txt-box p{ font-size: 16px;}
section.area03 .inner .wrap .btn-box{ display: table-cell; vertical-align: middle; width: 170px; padding-left: 10px; box-sizing: border-box;}
section.area03 .inner .wrap .btn-box a.btn01{ font-size: 14px; background-color: #fff; border: 2px solid #0063af; padding: 10px 40px 10px 20px; display: inline;}
section.area03 .inner .wrap .btn-box a.btn01::after{ right: 15px; width: 10px; height: 10px;}
section.area03 .inner .wrap.mt0{ margin: 0 auto; border-top: 0px none;}
section.area03 .inner > .btn-box{ width: 100%; max-width: 90%; margin: 40px auto 0;}
section.area03 .inner > .btn-box a.btn01{ width: 100%; font-size: 20px; font-weight: bold; padding: 10px 40px 10px 20px; border: 2px solid #0063af; border-radius: 4px;}
section.area03 .inner > .btn-box a.btn01::after{ right: 20px; width: 16px; height: 16px;}
/*=======================*/
section.area07{ width: 100%; overflow: hidden; padding: 40px 10px 0; box-sizing: border-box;}
section.area07 .inner{ width: 100%; max-width: 800px; margin: auto auto;}
section.area07 .inner h2{ padding: 10px 20px 9px; box-sizing: border-box; font-size: 20px; line-height: 1.2; font-weight: bold; color: #fff; background-color: #0063af; text-decoration: none; border-radius: 8px; text-align: center; line-height: 1.4;}
section.area07 .inner h2 span{ font-size: 14px;}
section.area07 .inner .box{ width: 100%; overflow: hidden; padding: 20px 20px 0; box-sizing: border-box; text-align: center;}
section.area07 .inner .box:nth-child(3){ text-align: center;}
section.area07 .inner .box p{ line-height: 1.2;}
section.area07 .inner .box hr{ border-top: 2px dashed #c8d2e3; margin: 20px 0;}
/*=======================*/
#copy{ text-align: center; font-size: 14px;}
#copy span{ font-size: 22px; vertical-align: middle; line-height: 1.2;}
a.backtop{ display: block; position: fixed; bottom: 6px; right: 6px; width: 40px; text-align: center; padding: 7px 0 7px; background-color: #0063af; border-radius: 8px;}
a.backtop img{ width: 26px; vertical-align: baseline;}



/*---------------------------------------
language(英語)
---------------------------------------*/
/*
body.en,
body.en h1,
body.en h2,
body.en h3,
body.en p,
body.en div,
body.en th,
body.en td,
body.en a,
body.en span,
body.en li{ word-break: break-word; letter-spacing: 0;}
body.en section.mvArea .inner h1{ font-size: 16px; word-break: break-word;}
body.en section.mvArea .inner h2{ font-size: 36px;}
*/
body.en,
body.en h1,
body.en h2,
body.en h3,
body.en p,
body.en div,
body.en th,
body.en td,
body.en a,
body.en span,
body.en li{ word-break: break-word;}

body.en section.mv-area .inner-head > .title{ max-width: 309px;}


/*---------------------------------------
language(ベトナム語)
---------------------------------------*/
/*
body.vn,
body.vn h1,
body.vn h2,
body.vn h3,
body.vn p,
body.vn div,
body.vn th,
body.vn td,
body.vn a,
body.vn span,
body.vn b,
body.vn li{ word-break: break-word; letter-spacing: 0;}
body.vn section.mvArea .inner h1{ font-size: 16px; word-break: break-word;}
body.vn section.mvArea .inner h2{ font-size: 36px;}
*/
body.vn,
body.vn h1,
body.vn h2,
body.vn h3,
body.vn p,
body.vn div,
body.vn th,
body.vn td,
body.vn a,
body.vn span,
body.vn b,
body.vn li{ word-break: break-word;}

body.vn section.mv-area .inner-head > .title{ max-width: 309px;}


/*---------------------------------------
language(インドネシア語)
---------------------------------------*/
/*
body.id,
body.id h1,
body.id h2,
body.id h3,
body.id p,
body.id div,
body.id th,
body.id td,
body.id a,
body.id span,
body.id a,
body.id b,
body.id li{ word-break: break-word; letter-spacing: 0;}
body.id section.mvArea .inner h1{ font-size: 16px; word-break: break-word;}
body.id section.mvArea .inner h2{ font-size: 36px;}
*/
body.id,
body.id h1,
body.id h2,
body.id h3,
body.id p,
body.id div,
body.id th,
body.id td,
body.id a,
body.id span,
body.id b,
body.id li{ word-break: break-word;}

body.id section.mv-area .inner-head > .title{ max-width: 309px;}


/* 20220517 */
.profBox{ width: 100%; max-width: 516px; overflow: hidden; margin: auto auto; display: table;}
.profBox .logo{ width: 224px; display: table-cell; vertical-align: middle;}
.profBox .text{ display: table-cell; vertical-align: middle; padding: 0 0 0 20px; box-sizing: border-box;}
.profBox .text p{ font-size: 12px;}