@charset "utf-8";
/* CSS Document */

/*==================================
	common
==================================*/
#contents .inner { width: 90.66%;}
#contents .mainTitArea { padding: 240px 0;}
#contents .mainTitArea .tit { color: #fff; text-align: center;}
#contents .mainTitArea .tit .en { font-size: 72px; font-weight: 600; line-height: 1.5;}
#contents .mainTitArea .tit .jp { font-size: 28px; font-weight: 700; line-height: 1.5;}
#contents .block { margin-top: 120px;}
#contents .blockTit { color: #2e4fb5; text-align: center;}
#contents .blockTit .en { font-size: 60px; font-weight: 600; line-height: 1.5;}
#contents .blockTit .jp { font-size: 28px; font-weight: 600; line-height: 1.5;}
#contents .breadcrumbsBox { background: #f3f6f7;}
#contents .breadcrumbsBox .inner:before { height: 100px; width: 100%; content: ""; display: block; background: #fff;}
#contents .breadcrumbsBox .breadcrumbsList { padding: 50px 0; display: flex;}
#contents .breadcrumbsBox .breadcrumbsList li { font-weight: 600;}
#contents .breadcrumbsBox .breadcrumbsList li a { padding-right: 70px; position: relative; font-weight: 400; display: flex; align-items: center;}
#contents .breadcrumbsBox .breadcrumbsList li a:after { margin-bottom: 1px; width: 40px; right: 15px; content: ""; display: block; background: #d5dddf; height: 1px; position: absolute;}
#contents .btnBLarrWH,
#contents .btnLBLarrWH { margin-top: 80px; text-align: center;}
#contents .btnBLarrWH .button { cursor: pointer; border: 0; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s;}
#contents .btnBLarrWH a,
#contents .btnBLarrWH .button { font-size: 28px; padding: 35px 30px; color: #fff; position: relative; border-radius: 60px; background: linear-gradient(90deg, rgba(46,79,181,1) 0%, rgba(9,143,207,1) 50%, rgba(46,79,181,1) 100%);background-size: 200% 100%; max-width: 480px; margin: 0 auto; font-weight: 600;}
#contents .btnLBLarrWH a { font-size: 28px; padding: 35px 30px; color: #fff; position: relative; border-radius: 60px; background: linear-gradient(90deg, rgba(0,170,235,1) 0%, rgba(9,143,207,1) 50%, rgba(0,170,235,1) 100%);background-size: 200% 100%; max-width: 480px; margin: 0 auto; font-weight: 600;}
#contents .btnBLarrWH a:after,
#contents .btnLBLarrWH a:after,
#contents .btnBLarrWH .button:after { width: 24px; height: 16px; right: 30px; top: 50px; content: ""; background: url("../img/arr_wh.svg")no-repeat; background-size: 24px 16px; display: block; position: absolute;}
#contents .btnBLarrWH a:hover,
#contents .btnLBLarrWH a:hover,
#contents .btnBLarrWH .button:hover { opacity: 1; background-position: 100% 0;}
#contents .circle.arr { border: solid 1px #fff; width: 120px; height: 120px; border-radius: 120px; position: absolute; display: flex; align-items: center; justify-content: center;}
#contents .circle.arr:before { width: 24px; height: 16px; background-size: 24px 16px; content: ""; background: url("../img/arr_wh.svg")no-repeat; display: block;}
#contents .circle.arr.blue { background: linear-gradient(135deg, rgba(46,79,181,1) 0%, rgba(9,143,207,1) 50%, rgba(46,79,181,1) 100%);background-size: 200% 100%; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s; border: none;}
#contents a:hover .circle.arr.blue { background-position: 100% 0;}
#contents .anchorList { margin-top: 120px; display: flex; justify-content: space-between; align-items: flex-end;}
#contents .anchorList li a { font-size: 20px; font-weight: 600; padding-bottom: 30px; text-align: center;color: #d5dddf; background: url("../img/arr_btm_gr.svg") bottom center no-repeat; background-size: 8px 16px;}
#contents .anchorList li a span { padding-bottom: 10px; border-bottom: solid 1px #d5dddf; display: block; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s;}
#contents .anchorList li a:hover { color: #2e4fb5;opacity: 1; background: url("../img/arr_btm_bl.svg") bottom center no-repeat; background-size: 8px 16px;}
#contents .anchorList li a:hover span { border-bottom: solid 1px #2e4fb5;}
#contents .spAccordionBox { margin-top: 100px;}
#contents .spAccordionBox .tit { font-size: 30px; margin-bottom: 100px; text-align: center; font-weight: 700;}
#contents .inner .table { border-top: solid 1px #d5dddf;}
#contents .inner .table li { display: flex; border-bottom: solid 1px #d5dddf;}
#contents .inner .table li .head { width: 32%; padding: 40px 40px 40px 80px; font-weight: 700;}
#contents .inner .table li .cont { width: 68%; padding: 40px 0; font-size: 16px; line-height: 1.8;}
#contents .inner .table li .cont .sub { line-height: 1.8 !important;}
#contents .subtit.subtitLine { padding-left: 50px; position: relative;}
#contents .subtit.subtitLine:before { top: 20px; width: 36px; height: 3px; background: #2e4fb5; display: inline-block; position: absolute; left: 0; content: "";}
@media screen and (min-width: 1201px) {
}
@media screen and (max-width: 1200px) {
#contents .circle.arr { width: 80px; height: 80px; border-radius: 80px;}
#contents .circle.arr:before { width: 18px; height: 10px; background-size: 18px 10px;}
}
@media screen and (min-width: 1100px) {
}
@media screen and (max-width: 1099px) {
#contents .inner .table li .head { padding: 40px;}
}
@media screen and (min-width: 751px) {
}
@media screen and (max-width: 750px) {
#contents .block { margin-top: 60px;}
#contents .mainTitArea { padding: 200px 0;}
#contents .mainTitArea .tit .en { font-size: 36px;}
#contents .mainTitArea .tit .jp { font-size: 14px;}
#contents .blockTit .en { font-size: 30px;}
#contents .blockTit .jp { font-size: 14px;}
#contents .breadcrumbsBox .inner:before { height: 50px;}
#contents .breadcrumbsBox .breadcrumbsList { padding: 20px 0; font-size: 12px;}
#contents .breadcrumbsBox .breadcrumbsList li a { padding-right: 35px;}
#contents .breadcrumbsBox .breadcrumbsList li a:after { margin-bottom: 0; width: 20px; right: 8px; bottom: 9px;}
#contents .btnBLarrWH a,
#contents .btnLBLarrWH a,
#contents .btnBLarrWH .button { font-size: 18px; padding: 15px 25px 15px 15px; width: 80%; max-width: 300px;}
#contents .btnBLarrWH a:after,
#contents .btnLBLarrWH a:after,
#contents .btnBLarrWH .button:after { width: 12px; height: 8px; right: 15px; top: 25px; content: ""; background: url("../img/arr_wh.svg")no-repeat; background-size: 12px 8px;}
#contents .circle.arr { width: 40px; height: 40px; border-radius: 40px;}
#contents .circle.arr:before { width: 11px; height: 6px; background-size: 11px 6px;}
#contents .anchorList { display: none;}
#contents .spAccordionBox { margin-top: 25px;}
#contents .spAccordionBox .tit { padding: 15px 8% 15px 15px; font-size: 18px; margin-bottom: 0; border-bottom: solid 1px #d5dddf; background: url("../img/arr_btm_bk.svg") right 5% center no-repeat #f3f6f7; background-size: 6px 18px; cursor: pointer;}
#contents .spAccordionBox .tit.openSP { margin-bottom: 0; background: url("../img/arr_top_bk.svg") right 5% center no-repeat #f3f6f7; background-size: 6px 18px; cursor: pointer;}
#contents .inner .spAccordionBox dl.accordion { display: none;}
#contents .inner .table li { display: block;}
#contents .inner .table li .head { width: 100%; padding: 20px 0 10px 0;}
#contents .inner .table li .cont { width: 100%; padding: 0 0 20px 0;}
#contents .inner .table li .cont .sub { font-size: 14px;}
#contents .subtit.subtitLine { padding-left: 25px;}
#contents .subtit.subtitLine:before { top: 10px; width: 16px; height: 2px;}
}

@keyframes loop-slide {
  from { transform: translateX(0);}
  to { transform: translateX(-100%);}
}