@charset "utf-8";
/*
---------------------------------------------
    navigation01 ※TOP、下層共通
*/
.header-area-upper {
	padding: var(--s1);
	text-align: right;
	background: url('img/bg_mv.jpg') no-repeat center top/cover;
}
.header-area--low .header-area-upper {
    background-position: center -4.7rem;
}
.header-title {
	font-size: 1.2rem;
	display: inline-block;
	position: relative;
	color: #fff;
}
.header-title::before {
	content: "PR";
	padding: 0 .2rem .2rem;
	color: #333;
	background-color: #fff;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	left: -2.4rem;
	font-weight: 900;
}
.header-title a {
	text-decoration: none;
	color:#fff;
}
.header-title a:hover {
	text-decoration: underline;
}
/*
---------------------------------------------
    sp settings
*/
@media screen and (max-width: 767px) {
    .header-area-upper {
        background:url(img/bg_mv_sp.jpg) no-repeat 0 0;
        text-align: left;
        background-size: 100%;
        overflow-x: hidden;
    }
    .header-title {
        padding-left:2.4rem;
        overflow: auto;
        white-space: nowrap;
        padding-bottom:0.6rem;
        scrollbar-width: thin;
        display: block;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .header-title::before {
        left: 0;
        top: 41%;
    }
}

.gnavi-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gnavi-btn.js-show {
    opacity: 1;
    visibility: visible;
}
.gnavi-ctrl {
    display: none;
}
.gnavi-btn {
    display: none;
}
.gnavi-btn-close {
    display: none;
}
.gnavi-area {
    display: none;
}
.toggle-content {
    display: none;
}
/*------------------------------------------
Global menu settings
*/
.navigation01-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    position: relative;
}
.navigation01-menu li {
    width: calc(100%/3);
}
.navigation01-menu li::before {
    display: none;
}
.navigation01-menu li a {
    padding: var(--s4) var(--s2);
    display: block;
    text-decoration: none;
    text-align: center;
}
.navigation01-menu li a:hover {
    opacity: .6;
}

ul.navigation01-menu li:before {
    content: "";
    display: block;
    width: 1px;
    height: 40%;
    background: #C4C4C4;
    position: absolute;
    left:0; 
    top:30%;
}
ul.navigation01-menu li:last-child:after{
    content: "";
    display: block;
    width: 1px;
    height: 40%;
    background: #C4C4C4;
    position: absolute;
    right:0; 
    top:30%;    
}
/*
---------------------------------------------
    sp settings
*/
@media screen and (max-width: 767px) {
	.gnavi-ctrl {
		display: block;
		transition: opacity 0.6s, visibility 0.6s;
		opacity: 0;
		visibility: hidden;
	}
	.gnavi-ctrl.is-show {
		opacity: 1;
		visibility: visible;
	}
	#low-header .gnavi-ctrl {
		opacity: 1;
		visibility: visible;
	}
	.gnavi-btn {
		width: var(--s7);
		height: var(--s6);
		background: #0477c8;
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 200;
		cursor: pointer;
	}
	.gnavi-btn span {
		width: var(--s4);
		height: 0.2rem;
		display: inline-block;
		background: #fff;
		position: absolute;
		left: 1.2rem;
		transform: translate(0, -50%);
		transition: transform 0.4s, opacity 0.4s;
	}
	.gnavi-btn span:nth-of-type(1) {
		top: 1.7rem;
	}
	.gnavi-btn span:nth-of-type(2) {
		top: 2.4rem;
	}
	.gnavi-btn span:nth-of-type(3) {
		top: 3.1rem;
	}
	.gnavi-btn.is-active span:nth-of-type(1) {
		transform: translateY(0.7rem) rotate(-45deg);
	}
	.gnavi-btn.is-active span:nth-of-type(2) {
		opacity: 0;
	}
	.gnavi-btn.is-active span:nth-of-type(3) {
		transform: translateY(-0.7rem) rotate(45deg);
	}
	.gnavi-btn-close {
		width: 50%;
		margin: 3rem auto 0;
		padding: var(--s2);
		background: #0477c8;
		display: block;
		text-align: center;
		border-radius: 30rem;
	}
	.gnavi-btn-close__inner {
		padding: 0 0 0 var(--s3);
		display: inline-block;
		color: #fff;
		font-weight: 900;
		position: relative;
	}
	.gnavi-btn-close__inner::before {
		content: "";
		width: 1em;
		height: 0.2rem;
		background: #fff;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%) rotate(45deg);
	}
	.gnavi-btn-close__inner::after {
		content: "";
		width: 1em;
		height: 0.2rem;
		background: #fff;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%) rotate(135deg);
	}
	.gnavi-area {
		width: 100%;
		height: 100vh;
		padding: var(--s3) var(--s1) var(--s10);
		display: block;
		background: #F5F5F5;
		overflow-x: hidden;
		overflow-y: auto;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
		transform: translateX(100%);
		transition: transform 0.8s ease, opacity 0.8s ease;
		opacity: 0;
	}
	.gnavi-title {
		min-height: var(--s7);
		margin: 0 auto 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.6rem;
		font-weight: 900;
		text-align: center;
		line-height: 1.5;
		width: 20rem;
	}
	.gnavi-pc {
		display: none;
	}
	.gnavi-list {
		border-bottom: 1px solid #333;
		position: relative;
	}
	.gnavi-list li {
		padding-left: 0;
	}
	.gnavi-list__item::before {
		display: none;
	}
	.gnavi-list__link {
		width: 100%;
		margin: 0 auto;
		padding: var(--s2) var(--s4) var(--s2) var(--s2);
		border-top: 1px solid #003B9E;
		display: block;
		font-weight: 900;
		line-height: 2;
		text-decoration: none;
		position: relative;
		color: #171F37;
	}
	.gnavi-list__link::after {
		content: "";
		width: 1rem;
		height: 1.4rem;
		background: url("img/arrow-01-blue-right.svg") no-repeat center/100% auto;
		position: absolute;
		top: 50%;
		right: var(--s2);
		transform: translate(0, -50%) rotate(0);
		transition: transform 0.3s;
	}
	.gnavi-list__link--toggle::after {
		background-image: url("img/arrow-01-blue-down.svg");
		width: 1.4rem;
	}
	.gnavi-list__link--toggle.is-open::after {
		transform: translate(0, -50%) rotate(180deg);
	}
	.gnavi-list__sub {
		width: 100%;
		background: #fff;
	}
	.gnavi-list__low .gnavi-list__link {
		padding: var(--s2) var(--s4) var(--s2) var(--s4);
	}
	.gnavi-list__low .gnavi-list__link::after {
		content: "└";
		background: none;
		transform: translateY(-50%);
		position: absolute;
		top: 40%;
		left: 1rem;
	}
	.is-gnavi-open .gnavi-area {
		opacity: 1;
		transform: translateX(0);
	}
	/*------------------------------------------
	Global menu settings
	*/
	.navigation01-menu-area {
		display: none;
	}
}


/* mokuji
-------------------------------------------------------------*/
    .onb-index02-frame {
        width: 100%;
    }
    .onb-index02-wrap {
        margin: var(--s6) auto;
        padding: var(--s1) var(--s3) var(--s1) var(--s3);
        background-color: #F5FAFF;
        position: relative;
    }
    .onb-index02-title {
        padding: var(--s2) var(--s2) var(--s1) var(--s5);
        color: #171F37;
        font-size: 2.2rem;
        font-weight: 900;
        line-height: 1;
        background: url('./img/ring_small.png') no-repeat left 0.1rem top 1.6rem;
        background-size: 2.7rem;
        position: relative;
    }
    .onb-index02-chapter {
        padding: var(--s2) var(--s2) var(--s2) 0;
        font-weight: 900;
        counter-reset: number 0; 
    }
    #toc ul.onb-index02-chapter li {
        position: relative;
        padding-left:2.5rem;
    }
    #toc ul.onb-index02-chapter li:not(.onb-index02-chapter-h-three)::before {
        content: "";
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        background-color: #0477C8;
        position: absolute;
        top: 0.8rem;
        left: 0;
    }
    #toc ul li.onb-index02-chapter-h {
        margin: 0;
        font-size: 100%;
        line-height: 1.7;
        position: relative;
    }
    #toc ul li.onb-index02-chapter-h a {
        display: block;
        text-decoration: none;
    }
    #toc ul li.onb-index02-chapter-h a:hover {
        opacity: 0.6;
    }
    #toc ul li.onb-index02-chapter-h-two {
        margin-left: var(--s1);
        position: relative;
    }
    #toc ul li.onb-index02-chapter-h-three {
        margin-left: var(--s4);
        position: relative;
    }
    #toc ul li.onb-index02-chapter-h-two::before,
    #toc ul li.onb-index02-chapter-h-three::before {
        position: absolute;
        top: 0;
        left: -1.8em;
    }
    #toc ul li.onb-index02-chapter-h-three::before {
        content: "└";
    }
    /*----------------------------------------------
    	more content settings
    */
    #toc.onb-index02-gradation {
        margin-top: 1.4rem;
        height: auto;
        max-height: 12rem;
        overflow: hidden;
        transition: max-height 1s;
        border-top: 1px solid #003B9E;
        position: relative;
        padding: 0;
    }
    #toc.onb-index02-gradation::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        transition: 0.3s;
        background: linear-gradient(to bottom, transparent 0%, #F5FAFF 100%);
    }
    #toc.onb-index02-gradation.is-open::after {
        display: none;
    }
    .onb-index02-btn {
        max-width: 32rem;
        margin: 2rem auto 0 auto;
        position: relative;
        z-index: 5;
    }
    .onb-index02-btn span {
        width: 100%;
        margin: var(--s5) auto;
        padding: 2rem 6rem 2rem 3rem;
        border: .2rem solid #0477c8;
        border-radius: 30rem;
        background: url('./img/acc-off.svg') no-repeat 90% center #fff;
        display: block;
        text-align: center;
        transform: translate(0, 0);
        transition: transform 0.3s;
        cursor: pointer;
        z-index: 1;
        background-size: 1.5rem;
        font-weight: 900;
    }
    .onb-index02-btn::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: #171F37;
        border-width: 0 1px 1px 0;
        transform: translate(.5rem, .5rem);
        border-radius: 30rem;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
    }
    .onb-index02-btn:hover span {
        transform: translate(.5rem, .5rem);
    }
    .onb-index02-btn.is-open span {
        background: url('./img/acc-on.svg') no-repeat 90% center #fff;
        background-size: 1.5rem;
    }
    /*------------------------------------------------------------
        SP settings
    */
    @media screen and (max-width: 767px) {
        #toc .onb-index02-chapter {
            padding-left: var(--s4);
        }    
        .onb-index02-btn:hover span {
            transform: none;
        }
    }

/* ---------------------------------------------
related-article01(関連記事)
--------------------------------------------- */
.related-article01-frame {
    margin: var(--s6) auto;
    padding: var(--s1) var(--s3) var(--s1) var(--s3);
    background-color: #f6f6f6;
    position: relative;
}
.related-article01-title {
    padding: var(--s2) var(--s2) var(--s2) var(--s5);
    color: #171F37;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    background: url('./img/ring_small.png') no-repeat left 0.1rem top 1.6rem;
    background-size: 2.7rem;
    position: relative;
    border-bottom: 1px solid #003B9E;
    margin-bottom: 1rem;
}
.related-article01-list {
    padding: var(--s2) 0;
    font-weight: 900;
}
.related-article01-list li {
    margin: 0 0 0 0.8rem;
    padding-left:2.5rem;
    font-size: 100%;
    line-height: 1.7;
    position: relative;
}
.related-article01-list li + li {
    margin-top: 10px;
}
.related-article01-list li::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: #0477C8;
    position: absolute;
    top: 0.8rem;
    left: 0;
}
.related-article01-list a {
    display: block;
    text-decoration: none;
}
.related-article01-list a:hover {
    opacity: 0.6;
}
.relations-box.relations-box--column {
    display: flex;
    gap: 10px;
}
.relations-box__pic {
    flex: 0 0 150px;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .related-article01-list {
        padding: 0;
    }
    .related-article01-list li {
        margin-left: 0;
    }
    .relations-box__pic {
        flex: 0 0 100px;
    }
}


/* MV
------------------------------------------- */
.mainvisual {
  position: relative;
  width: 100%;
  background: url('img/bg_mv.jpg') no-repeat center top -3rem/cover;
  color: white;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 5rem 0 10rem;
}
.mainvisual.lower {
  height:5rem;
  padding-top: 2rem;
  background-position: 0 -8rem;
}
.mainvisual.lower .logo {
  width:25rem;
}
.mainvisual.lower a:hover {
  opacity:0.6;
}
.mainvisual_wrap {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  z-index: 0;
}
.mainvisual .logo {
  position: relative;
  z-index: 2;
  width: 200px;
  margin-bottom: 15px;
}
.mainvisual .marker{
    color:#fff;
    border-bottom: 3px solid #B80101;
}
.text {
  position: relative;
  z-index: 2;
}
.text h2 {
  font-size: 5.2rem;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 20px;
}
.text p {
  line-height: 2;
  font-weight: 500;
}
.background-video {
  position: absolute;
  bottom: -7rem;
  right: -8rem;
  width: 85rem;
  height: auto;
  z-index: 1;
  opacity: 0.2;
}


/*
---------------------------------------------
    sp settings
*/
@media screen and (max-width: 767px) {
    .mainvisual {
      background: url('img/bg_mv_sp.jpg') no-repeat 0 -1.2rem;
      background-size: 100%;
      padding-top: 0;
      padding-bottom: 6rem;
    }
    .mainvisual .logo {
      width: 18rem!important;
      margin-top:19rem;
      margin-left:1rem;
      margin-bottom: 1rem;
    }
    .mainvisual.lower .logo {
      margin-top:0;
    }
    .mainvisual_wrap {
      width: 100%;
    }
    .text h2 {
      font-size: 3.2rem;
      margin-left:1rem;
      margin-right:1rem;
    }
    .text p {
      margin-left:1rem;
        margin-right:1rem;
    }
    .background-video {
      top: 0;
      left: 0;
      width: 100%;
    }
    .mainvisual.lower {
      padding-top: 0.5rem;
    }
}

/* ========================================
   2.3.1 section-title01
   ======================================== */
.section-title01-frame {
    padding-top: 24rem;
    position: relative;
}
.section-title01-frame::before {
    content: "";
    width: 100%;
    min-height: 38.8rem;
    background: url("./img/bg_section1_title.jpg") no-repeat center center;
    background-size: cover;
    transform: translateX(-50%);
    position: absolute;
    top: 0;
    left: 50%;
}

.section-title01-bg {
    padding: 6rem 0 0;
    background-color: rgba(255, 255, 255, 0.96);
    position: relative;
    z-index: 2;
}
.section-title01 {
    margin-bottom: 5rem;
    font-size: 4.8rem;
    font-weight: 900;
    color: #171F37;
    line-height: 1.4;
    text-align: center;
    position: relative;
    margin-top: 2rem;
}
.section-title01::after {
    content: "";
    height: 1px;
    transform: translateX(-50%);
    background-color: #ccc;
    position: absolute;
    top: -2rem;
    left: 50%;
    z-index: 2;
}
/*
---------------------------------------------
    sp settings
*/
@media screen and (max-width: 767px) {
    .section-title01-frame::before {
        background: url("./img/bg_section1_title_sp.jpg") no-repeat center 0;
        background-size: 100%;
    }
    .section-title01-frame {
        padding-top: 10rem;
    }
}


/* ========================================
   2.3.2 section-title02
   ======================================== */
.section-title02-frame {
    margin-top: 5rem;
    position: relative;
}
.section-title02 {
    font-size: 4.8rem;
    font-weight: 900;
    color: #171F37;
    text-align: center;
    display: block;
    margin-top: 4rem;
    line-height: 1.4;
    margin-bottom: 3rem;
}
.section-title02 a {
  background: url("./img/arrow-01-blue-right.svg") no-repeat right 60%;
	padding-right:4rem;
	background-size: 2rem;
	text-decoration: none;
}
.section-title02 a:hover {
	opacity:0.6;
}
.section-title02 span {
    font-size: 3rem;
    color: #0477C8;
}
.section-title02-sub {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 2.4rem;
    font-weight: 900;
    color: #003B9E;
    text-align: center;
    position: absolute;
    top: -1.5em;
    left: 0;
    display: inline-block;
    background: url(img/ring_h2.png) no-repeat center center;
    padding: 3rem 0;
}
/*
---------------------------------------------
    sp settings
*/
@media screen and (max-width: 767px) {
    .section-title02-sub {
        font-size:1.8rem;
    }
    .section-title02 a {
        background-size: 1.5rem;
    }
}


/* ========================================
   2.2.0 center-img-box
   ======================================== */
.center-img-box {
    display: flow-root;
}
.center-img {
    max-width: 64%;
    margin: 0 auto;
    padding-bottom: var(--s2);
}
.center-img-catch {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--pri-dark);
    line-height: 1.5;
}

/* ========================================
   3.0.1 m-title01 (box専用見出し/中央揃えテキストのみ)
   ======================================== */
.m-title01 {
    padding: .8rem .8rem 1.6rem .8rem;
    font-size: 2.6rem;
    font-weight: 900;
    color: #171F37;
    text-align: center;
    line-height: 1.5;
}

/* ========================================
   3.0.3 m-title03 (box専用見出し/小アイコン+下線)
   ======================================== */
.m-title03 {
    padding: var(--s2) var(--s1) 0 var(--s5);
    font-size: 2rem;
    font-weight: 900;
    color: #023156;
    line-height: 1.5;
    background: url('./img/ring_small.png') no-repeat left 1.8rem;
    background-size: 2.7rem;
}

/* ========================================
   3.0.6 title-catch (box専用見出し/中央揃え下線タイプ)
   ======================================== */
.title-catch {
    padding: 4.5rem 0 1rem;
    font-size: 2.8rem;
    font-weight: 900;
    color: #0477C8;
    text-align: center;
    line-height: 1.5;
    margin-top: 5rem;
    margin-bottom: 2rem;
    background:url(img/ring_h2.png) no-repeat top center;
    background-size:4rem
}
.title-catch span {
    font-size: 1.6rem;
}
/*
---------------------------------------------
    sp settings
*/
@media screen and (max-width: 767px) {
    .title-catch {
        font-size: 2.2rem;
    }
    .m-title03 {
        font-size: 1.8rem;
    }
}

/* ========================================
   3.0.7 arrow-title (box専用見出し/吹き出しタイプ)
   ======================================== */
.arrow-title {
    margin-bottom: 0;
    font-size: 2.6rem;
    font-weight: 900;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    position: relative;
    background: url(img/bg_arrow_title.jpg) no-repeat 0 0/cover;
    padding: var(--s2) var(--s2) var(--s3);
}
.arrow-title-sub {
    padding: 0;
    margin-bottom: 0;
    font-size: 2.2rem;
    color: #fff;
    line-height: 1.4;
    display: inline-block;
}
.arrow-title-small {
    font-size: 1.4rem;
}

/* ========================================
   3.5 tag-list
   ======================================== */
.taglist-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.4;
}
.tag-list-3c {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
	  margin-top:1.5rem;
}
.tag-list-3c li {
    width: calc((100% - var(--s2)) / 3);
    padding: .8rem .5rem;
    text-align: center;
    line-height: 1.5;
    font-size: 1.5rem;
    font-weight: 900;
}
.first .tag-list-3c li {
	  width: inherit;
}
.third .tag-list-3c li {
	  width: inherit;
}
.third .tag-list-3c li:nth-child(2) {
	  width: 24%;
}
.third .tag-list-3c li:nth-child(3) {
	  width: 24%;
}
.tag-list-3c li::before {
    display: none;
}
.tag-colored {
    background-color: #003B9E;
    color: #fff;
}
.tag-colored .tag-name,
.tag-white .tag-name {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   3.9 iconbox01
   ======================================== */
.iconbox01-bg-colored {
	background-color:#F1F8FF;
	padding-top:1rem;
	margin-bottom: 2rem;
}
.iconbox01-area {
    padding: var(--s2) var(--s1);
    position: relative;
}
.iconbox01-area p{
	margin-bottom:0rem;
	line-height: 1.7;
}
.iconbox01-image {
    width: 3.6rem;
    height: 3.6rem;
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translate(-50%,-50%);
    right: 50%;
}
.iconbox01-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #003B9E;
    text-align: center;
    line-height: 1.4;
}
.iconbox01-title span {
    margin-bottom: var(--s1);
    font-size: 1.4rem;
    line-height: 1.5;
    display: block;
}

/* ========================================
   4.0 column-medium (1カラム)
   ======================================== */
.column-medium {
    padding: var(--s4);
    border: 3px solid #003B9E;
    background-color: #fff;
}

/* ========================================
   4.1.1 onb-icon-title (1カラムbox専用見出し/小アイコン左上)
   ======================================== */
.onb-icon-title-frame {
    position: relative;
    width: calc(100% + var(--s8));
    margin-left: calc(var(--s4) * -1);
    padding: 4rem var(--s2) 4rem;
    background: url(img/box_title.png) no-repeat center center/cover;
    color: #fff;
    margin-top: -3.3rem;
}
.onb-icon-title-icon {
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: -4rem;
    left: 0;
}
.onb-icon-title-icon img {
    width: 100%;
}
.onb-icon-title {
    text-align: center;
    font-size: 3.6rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.5;
}
.onb-icon-title .underline {
    text-decoration: underline;
}
.onb-icon-title small {
    font-size: 2.4rem;
}
.onb-icon-title-catch {
    margin-bottom: var(--s1);
    font-size: 2.8rem;
    line-height: 1.5;
    display: block;
}

/* ========================================
   1.1.4 acc-more-btn
   ======================================== */
.acc-more-btn {
	width: 22rem;
	margin: 4rem auto 4rem;
	padding: 2rem 6rem;
	background: #fff;
	border: .2rem solid #0477C8;
	border-radius: 30rem;
	box-shadow: 5px 5px 0 0 #CACED4;
	font-weight: 900;
	text-align: center;
	position: relative;
	transition: opacity 0.3s;
	cursor: pointer;
	color: #000E1E;
}
#page .acc-more-btn {
    width:24rem;
}

.acc-more-btn::before {
	content: "";
	width: 2rem;
	height: .2rem;
	background: #016BD4;
	position: absolute;
	top: 50%;
	right: 3rem;
	transform: translate(0, -50%);
}

.acc-more-btn::after {
	content: "";
	width: .2rem;
	height: 2rem;
	background: #016BD4;
	position: absolute;
	top: 50%;
	right: 3.9rem;
	transform: translate(0, -50%);
	transition: transform 0.3s;
}

.acc-more-btn:hover {
	opacity: 0.7;
}

.acc-more-btn.is-open::after {
	transform: translate(0, -50%) rotate(270deg);
}

.more-content {
	display: none;
}


/*------------------------------------------------------------
SP settings
*/
@media screen and (max-width: 767px) {
	.acc-more-btn {
		width: 90%;
	}

	.acc-more-btn span {
		transition: inherit;
		transform: none;
	}

	.acc-more-btn:hover span {
		transform: none;
	}
}


/* ========================================
   2.13.3.2 l-com-box04-frame-r
   ======================================== */
.com-box04-frame {
    padding: 0;
    margin-top: 6rem;
}
.com-box04-title {
    margin-bottom: var(--s4);
    padding: var(--s1);
    background-color: var(--bg-sec);
    color: var(--pri-dark);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.5;
}
.com-box04-area {
    display: flex;
    gap: var(--s4);
}
.com-box04-text {
    width: 90%;
}
.com-box04-text .caption {
    color: var(--txt-sub);
}
.com-box04-img {
    width: calc((100% - var(--s4))*.2);
    text-align: left;
    margin-top: 0.5rem;
}
.com-box04-img span {
    margin-top: var(--s1);
    display: block;
    font-size: 1.2rem;
    text-align: center;
}
.com-box04-catch {
    margin-bottom: var(--s2);
    color: #01448D;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.5;
}
.com-box04-catch a {
    color: #01448D;
	  text-decoration: none;
	  font-size: 2.6rem;
    background: url("./img/arrow-01-blue-right.svg") no-repeat right 60%;
    background-size: 1.2rem;
    display: block;
}
.com-box04-catch a:hover {
	opacity:0.6;
}

/* ========================================
   SP settings
   ======================================== */
@media screen and (max-width: 767px) {
    .section-title01-bg {
        padding: var(--s7) var(--s2) var(--s1) var(--s2);
    }
    .section-title01 {
        margin-bottom: var(--s3);
        font-size: 2.4rem;
    }
    .section-title01::before {
        font-size: 1.8rem;
        top: -3.2rem;
    }
    
    .section-title02 {
        font-size: 3rem;
        line-height: 1.4;
    }
    
    .center-img {
        max-width: 100%;
    }
    
    .column-medium {
        padding: var(--s2);
    }
    
    .onb-icon-title {
        font-size: 2.6rem;
    }
    .onb-icon-title small {
        font-size: 1.8rem;
    }
    .onb-icon-title-catch {
        font-size: 2.2rem;
    }
    .onb-icon-title-icon {
        width: 8rem;
        height: 8rem;
        top: -2rem;
    }
    
    .acc-more-btn {
        margin-right: var(--s1);
    }
    .acc-more-btn span {
        transition: inherit;
        transform: none;
    }
    .acc-more-btn:hover span {
        transform: none;
    }
    
    .com-box04-frame {
        padding: 0;
        margin-top: 2rem;
    }
    .com-box04-area {
        flex-direction: column;
        gap: var(--s2);
    }
    .com-box04-title {
        margin-bottom: var(--s2);
        font-size: 1.8rem;
    }
    .com-box04-img {
        width: 30%;
        margin: 0 auto;
    }
    .com-box04-text {
        width: 100%;
    }
    .com-box04-catch {
        font-size: 1.8rem;
    }
    .section-title02 span {
        font-size: 2.2rem;
    }
    .com-box04-catch a {
        padding-right:1rem;
        line-height:1.4;
    }
}


/* section1
----------------------------------------------*/
.section1{
	background:url(img/bg_section1.jpg) no-repeat center top;
	padding-bottom:6rem;
}
#page .section1{
	padding-top:6rem;
    padding-bottom:6rem;
}
.category .section1{
	margin-top:6rem;
}
.section1.lower{
	background:none;
}
.section1 .l-grid-three .framebox {
	border: 2px solid #003B9E;
	padding: 1.5rem;
	background-color: #fff;
	z-index: 0;
	position: relative;
}
.section1 .center-img{
	max-width:100%;
}
.section1 .tag{
	display: block;
	position: relative;
	min-height: 13.6rem;
	margin-bottom: 1.5rem;
}
.section1 .nado {
	display: inline-block;
	position: absolute;
	right:1rem;
	bottom: 0;
}
.section1 .btn-web {
	margin-top:0;
	margin-bottom:3rem;
}
.section1 .caption {
	color:#171F37;
	text-align: left;
}
.section1 .caption.note {
	margin-top:0;
}
.section1 .section-title02{
	margin-top:2rem;
}
.section1 .arrow-title{
	border-top: 2px solid #003B9E;
	border-left: 2px solid #003B9E;
	border-right: 2px solid #003B9E;
}
.section1 .arrow-title .marker{
	color:#fff;
    border-bottom:3px solid #B80101;
}

/* ========================================
   SP settings
   ======================================== */
@media screen and (max-width: 767px) {
	.section1{
		padding:2rem 0;
	}
    .section1 .nado {
        bottom: 0;
    }
}


/* section2
----------------------------------------------*/
.section2{
	background:url(img/bg_section2.jpg) repeat-y center top;
	padding-bottom: 10rem;
}
.section2 .onb-icon-title .marker{
  color:#fff;
  border-bottom:3px solid #B80101;
}
.section2 .section-title02-sub {
	top:2rem;
}
.section2 .section-title01 span {
	font-size:3rem;
	color: #0477C8;
}
.section2 .m-title01{
	font-size:3.2rem;
	margin-top:4rem;
}
.section2 .l-grid-three.ring .m-title01{
	font-size:2rem;
	margin-top:0;
	color: #023156;
	padding: 0;
}
.section2 .column-small{
	background-color: #F0F8FF;
	padding: 1rem 2rem 2rem;
	margin-bottom: 2rem;
}
.section2 .btn-web a{
	text-align:center;
	padding-top:2rem;
	padding-bottom:2rem;
}
.section2 .btn-web.first {
	margin-bottom: 6rem;
}
.section2 .column-medium {
	background-color: #fff;
	margin-top: 3rem;
}
.section2 .l-grid-three .column-small{
	background-color: #f6f6f6;
	padding:2rem;
}
.section2 .l-grid-three .center-img {
    max-width: 100%;
}
.section2 table th {
	width:40%;
	text-align: center;
}
.section2 .l-grid-three.ring{
	margin-top:3rem;
}
.section2 .l-grid-three.ring .btn-web a{
	text-align: left;
	padding-left:6rem;
}
.section2 ul.other {
	padding: 2rem 2rem 0;
	width:100%;
	margin: 0 auto;
}
.section2 ul.other li {
	border-bottom:1px dashed #CACED4;
	padding-bottom:1rem;
}
.section2 ul.other li:last-child {
	border-bottom: none;
}
.section2 ul.other li ul {
	display:flex;
	width: 100%;
	padding: 0;
	margin-top:2rem;
}
.section2 ul.other li ul li {
	margin-right:3rem;
	border-bottom: none;
}
.section2 ul.other li {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.section2 ul.other li::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: #0477C8;
    position: absolute;
    top: 0.8rem;
    left: 0;
}
.section2 ul.other ul li::before {
    border: 3px solid #0477C8;
	  background-color:inherit;
	  width:0.9rem;
	  height:0.9rem;
	  top:0.6rem;
}
.section2 h5.title-catch {
	color: #023156;
	font-size: 2rem;
	border-bottom:2px solid #0477C8;
	padding-bottom:1rem;
	margin: 2rem 0 1rem;
	text-align:left;
	background: none;
}
.section2 .onb-listbox-area {
    margin-top: 1rem;
    padding: 3rem;
    background-color: #F0F8FF;
    position: relative;
}
.section2 .onb-listbox-title {
    margin-top: -5rem;
    text-align: center;
}
.section2 .onb-listbox-title span {
    padding: .8rem;
    color: #fff;
    background-color: #484140;
    display: inline-block;
}
.section2 .onb-listbox-subtitle {
    text-align: center;
    font-weight: 900;
}
.section2 .onb-listbox-list {
    width: 100%;
}
.section2 .onb-listbox-list li {
    padding-left: var(--s4);
    line-height: 1.5;
    background: url('./img/icon-check.svg') no-repeat top 0.3rem left;
    background-size: 2rem 2rem;
    margin-bottom: 1rem;
}
.section2 table.company {
	margin-top:2rem;
}
.section2 table.company th {
	width:20%;
	text-align: center;
}

/* ========================================
   SP settings
   ======================================== */
@media screen and (max-width: 767px) {
    .section2 .onb-listbox-area {
        padding: var(--s2) var(--s2) var(--s2) var(--s2);
    }
    .section2 .onb-listbox-list li {
        font-size: 1.6rem;
    }
    .section2 .onb-listbox-list--three li {
        width: calc((100% - var(--s2)) / 2);
    }
    .section2 .onb-listbox-title {
        margin: -5rem auto 0 auto;
        padding: var(--s2);
        font-size: 1.8rem;
        text-align: center;
    }
    .section2 .section-title01 span {
        font-size:2.2rem;
    }
    .section2 .section-title01 {
        font-size:2.8rem;
    }
    .section2 .column-medium {
        margin: 0 1rem;
    }
    .section2 .onb-icon-title-frame {
        width: calc(100% + var(--s4));
        margin-left: calc(var(--s2) * -1);
        margin-top:-1.8rem;
    }
    .section2 .m-title01{
        font-size:2.6rem;
        margin-top:2rem;
    }
    .section2 ul.other li ul {
        display:inherit;
    }
    .section2 ul.other,
    .section2 ul.other ul {
      list-style: none;
      padding-left: 0;
      margin-left: 0;
    }

    .section2 ul.other li::marker,
    .section2 ul.other ul li::marker {
      display: none; 
    }

    /* 念のため bullet を消す疑似要素があればリセット */
    .section2 ul.other li::before {
      content: "";
      width: 1.2rem;
      height: 1.2rem;
      background-color: #0477C8;
      border-radius: 50%;
      position: absolute;
      top: 0.8rem;
      left: 0;
    }
    .section2 ul.other ul li::before {
      border: 3px solid #0477C8;
      background-color: transparent;
      width: 0.9rem;
      height: 0.9rem;
      top: 0.6rem;
    }
    .section2 .btn-web.first {
        margin-bottom: 3rem;
    }
    .section2 table.company th {
        width:35%;
    }
    .section2 .column-medium {
        margin-bottom:3rem;
    }
    .section2{
        padding-bottom: 4rem;
        
    }
    .section2 .title-catch{
        margin-bottom:1.5rem;
    }
    .section2 .title-catch.first{
        margin-top:1rem;
    }

}

/* section3
----------------------------------------------*/
.section3{
	background-color:#F6F6F6;
	padding: 8rem 0;
}
.section3 .box-full {
	margin-bottom: 2rem;
	width: calc(100% + var(--s5));
	margin-left: -2rem;
}
.section3 .arrow-title {
	padding:0;
}
.section3 .arrow-title a{
	color:#fff;
	text-decoration: none;
	display: block;
	padding: var(--s2);
	background: url("./img/arrow-01-blue-right.svg") no-repeat right 1.5rem top 50%;
	background-size: 1.5rem;
}
.section3 .arrow-title a:hover {
	opacity:0.6;
}
.section3 .section-title02 {
	margin-bottom:0;
}
.section3 .l-grid-three{
	margin-top:3rem;
}
.section3 .column-small {
	border: 2px solid #003B9E;
	padding: 0 2rem 2rem;
	background-color: #fff;
}
.section3 .center-img {
	max-width:100%;
	padding-bottom: 0;
	margin-top:-1.5rem;
}
.section3 table th {
	width:40%;
	text-align: center;
}
/* section3：常に3分割の“固定幅”カラムにする */
.section3 .l-grid-three {
  /* 余白ぶん差し引いて3等分した固定幅 */
  --minimum: calc((100% - var(--s2) * 2) / 3);

  display: grid;
  gap: var(--s2);
  /* ★3列固定。1・2個でもBOX幅は変えない */
  grid-template-columns: repeat(3, minmax(0, var(--minimum)));

  /* 余白の見せ方：中央寄せ（start/endにしてもOK） */
  justify-content: center;
  justify-items: stretch; /* 中身の横伸びを抑えたいなら start でもOK */
}

/* SPで1列に落とす場合（必要なら） */
@media (max-width: 767px) {
  .section3 .l-grid-three {
    grid-template-columns: 1fr;
    justify-content: stretch;
    justify-items: stretch;
  }
  .section3 .l-grid-three {
    min-width: 0;
    margin-top: 0;
  }
  .section3 .column-small {
    min-width: 0;
  }
  .section3{
    padding: 3rem 0 8rem;
  }
}


/* section4
----------------------------------------------*/
.section4{
		padding: 8rem 0;
}


/* ========================================
   SP settings
   ======================================== */
@media screen and (max-width: 767px) {
	.section4{
		padding:4rem 0 6rem;
	}
}


/* section5
----------------------------------------------*/
.section5{
	padding: 8rem 0;
	background:#F6F6F6;
	background-size: 10%;
}
.section5 .column-medium {
  padding: 3rem 2rem 2rem;
  border: 3px solid #003B9E;
  background: url(img/half_ring.png) no-repeat 0 0 #fff;
}
.section5 .title-catch{
	margin-top:0;
    background-image:none;
	padding-top: 2rem;
}
.section5 .title-catch a {
	text-decoration: none;
	color:#0477C8;
	font-size:2.6rem;
	background: url("./img/arrow-01-blue-right.svg") no-repeat right 1.5rem top 50%;
	background-size: 1.5rem;
	display: block;
}
.section5 .title-catch a:hover {
	opacity:0.6;
}

/* ========================================
   SP settings
   ======================================== */
@media screen and (max-width: 767px) {
	.section5{
		padding:4rem 0 10rem;
	}
    .section5 .title-catch a {
        padding-right:1.5rem;
        background-position: right 0 top 55%;
        background-size: 1.3rem;
    }
    .section5 .title-catch{
        margin-bottom:1.5rem;
    }
}

/* 下層
----------------------------------------------*/
.conclusion-box-frame {
	margin-top: 5rem;
	padding: var(--s2) var(--s4) var(--s4) var(--s4);
	background-color: #F5FAFF;
}
.conclusion-box-ttl {
	position: relative;
	margin-bottom: 2rem;
}
.conclusion-box-ttl__icon {
	width: 10.5rem;
	height: 10.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border:10px solid #D9E1F1;
    background: #fff;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
}
.conclusion-box-ttl__icon span {
	color: #01448D;
	font-size: 2rem;
    font-weight: 900;
	border-bottom: none;
}
.conclusion-box-ttl__text {
	padding-top: 3.5rem;
	padding-bottom: var(--s4);
	margin-left: 12rem;
	font-size: 2.4rem;
	font-weight: 900;
	line-height: 1.5;
	border-bottom: 3px solid #B80101;
	color: #0477C8;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
	.conclusion-box-ttl__icon {
		width: 8rem;
		height: 8rem;
		transform: translateY(-50%);
		top: -.8rem;
		left: -4rem;
		bottom: inherit;
	}
	.conclusion-box-ttl__text {
		margin-left: 0;
		padding-left: 4rem;
		padding-top: var(--s1);
		padding-bottom: var(--s2);
		font-size: 2.2rem;
	}
	.l-onb-conclusion-img {
		width: 36%;
	}
    .conclusion-box-ttl__icon span {
        font-size: 1.6rem;
    }
}