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

/* header_new */
/* ------------------------------------------------------------------
320px 〜 959px
------------------------------------------------------------------*/
@media screen and (min-width:320px) {
	.header_sp {
		background: #fff;
		border-bottom: solid 3px #093C87;
		position: fixed;
		width: 100%;
		z-index: 9999;
	}
	.header_sp header {
		padding: 4%;
		position: relative;
	}
	.header_sp .logo {
		max-width: 165px;
	}
    .hamburger {
        display: block;
        height: 50px;
        margin-left: auto;
        position: absolute;
    	top: 10px;
    	right: 10px;
        z-index: 10;
        width: 60px;
        border: none;
        background-color: transparent;
    }
    .hamburger.-active .hamburger__line {
        background-color: transparent;
    }
    .hamburger.-active .hamburger__line::before {
        top: 0;
        transform: rotate(45deg);
    }
    .hamburger.-active .hamburger__line::after {
        top: 0;
        transform: rotate(-45deg);
    }
    /* .hamburger.-active .hamburger__text::before {
      content: '閉じる';
    } */
    .hamburger__line {
        display: block;
        height: 2px;
        position: absolute;
        top: 23px;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        background-color: #172e59;
        transition: 0.4s;
    }
    .hamburger__line:before,
    .hamburger__line:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
        background-color: #172e59;
        transition: inherit;
    }
    .hamburger__line:before {
        top: -6px;
    }
    .hamburger__line:after {
        top: 6px;
    }
    .hamburger__text {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    /* .hamburger__text::before {
        content: "メニュー";
        text-align: center;
        color: #172e59;
        font-size: 10px;
        font-weight: 900;
    } */
    .header__nav-area {
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 9;
        height: 100vh;
        width: 300px;
        visibility: hidden;
        padding-top: 60px;
        background-color: #fff;
        transition: 0.4s;
		overflow: scroll;
    }
    .header__nav-area.-active {
        left: 0;
		visibility: visible;
    }
    .global-navigation {
        padding-top: 40px;
        padding-right: 25px;
        padding-bottom: 120px;
        padding-left: 25px;
    }
    .global-navigation__list > li {
        padding-bottom: 20px;
        border-bottom: 2px solid #e7e9ee;
		letter-spacing: 1.5px;
    }
    .global-navigation__list > li + li {
		margin-top: 20px;
    }
    .global-navigation__link {
		display: flex;
        align-items: center;
        justify-content: space-between;
        color: #172e59;
        font-weight: 900;
        transition: color 0.4s;
        font-size: 1rem;
    }
    .global-navigation__link.-accordion {
        position: relative;
        background: none;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        padding: 0;
		font-weight: normal;
    }
    .global-navigation__link.-accordion::after {
        content: '';
        display: block;
        height: 12px;
        position: absolute;
        top: 50%;
        right: 5px;
        width: 2px;
        background-color: #093C87;
        transform: translateY(-50%);
        transition: transform 0.4s;
    }
    .global-navigation__link.-accordion::before {
        content: '';
        display: block;
        height: 2px;
        position: absolute;
        top: 50%;
        right: 0;
        width: 12px;
        background-color: #093C87;
        transform: translateY(-50%);
    }
    .global-navigation__link.-active::after {
      transform: translateY(-50%) rotate(-90deg);
    }
    .accordion {
        height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: 0.4s;
    }
    .accordion.-active {
        height: auto;
        padding-top: 30px;
        visibility: visible;
    }
    .accordion__list li {
        font-size: 0.9rem;
    }
    .accordion__list li + li {
         margin-top: 21px;
    }
    .accordion__link {
        color: #172e59;
    }
	.accordion__list .st {
		font-weight: bold;
	}
	.accordion__list .link_in {
		text-indent: 20px;
	}
}

/* ------------------------------------------------------------------
960px〜
------------------------------------------------------------------*/
@media screen and (min-width:960px) {
	.header_pc {
		background: #fff;
		border-bottom: solid 3px #093C87;
		position: fixed;
		width: 100%;
		z-index: 9999;
	}
	.header_pc header {
		position: relative;
	}
	.header_pc .logo {
		float: none;
	}
	.header_pc .head_right {
		float: none;
	}
	.header_pc .head_right .head_phone {
		position: absolute;
		top: 15px;
		right: 190px;
		margin: 0;
	}
	.header_pc .head_right .head_icon {
		position: absolute;
		top: 38px;
		right: 60px;
	}

	.menu_pc {
		z-index: 49;
		position: relative;
		width: 960px;
		margin: 0 auto;
	}
	.menu {
		position: relative;
		width: 100%;
		height: 50px;
		max-width: 960px;
		margin: 0 auto;
	}
	.menu > li {
		float: left;
		width: 150px;
		height: 50px;
		line-height: 50px;
		background: #fff;
		text-align: center;
	}
	.menu > li a {
		display: block;
		color: #232323;
		letter-spacing: 1px;
	}
	.menu > li a:hover {
		color: #999;
	}
	.menu .init-bottom {
		text-decoration: none;
	}
	ul.menu__second-level {
		visibility: hidden;
		opacity: 0;
		z-index: 1;
	}
	ul.menu__third-level {
		visibility: hidden;
		opacity: 0;
	}
	ul.menu__fourth-level {
		visibility: hidden;
		opacity: 0;
	}
	.menu > li:hover {
		background: #f2f2f2;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	.menu__second-level li {
		/* border-top: 1px solid #111; */
	}
	.menu__third-level li {
		border-top: 1px solid #111;
	}
	.menu__second-level li a:hover {
		background: #232323;
		color: #fff;
	}
	.menu__third-level li a:hover {
		background: #2a1f1f;
	}
	.menu__fourth-level li a:hover {
		background: #1d0f0f;
	}
	/* 下矢印 */
	/*.init-bottom:after {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		margin: 0 0 0 15px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	} */
	/* floatクリア */
	.menu:before,
	.menu:after {
		content: " ";
		display: table;
	}
	.menu:after {
		clear: both;
	}
	.menu {
		*zoom: 1;
	}
	li.menu__mega ul.menu__second-level {
		position: absolute;
		top: 40px;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		padding: 20px 2%;
		background: #f2f2f2;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 9999;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	li.menu__mega:hover ul.menu__second-level {
		top: 53px;
		visibility: visible;
		opacity: 1;
	}
	li.menu__mega ul.menu__second-level > li {
		width: 32%;
		border: none;
	}
	li.menu__mega #second-level4 > li {
		width: 24%;
		border: none;
	}
	li.menu__mega #second-level5 > li {
		width: 20%;
		border: none;
	}
	.menu .fa-square {
		color: #093C87;
		margin-right: 3px;
	}
	.menu .fa-angle-right {
		margin-left: 5px;
	}
	#second-level4 .st {
		font-weight: bold;
		font-size: 1.2rem;
	}
	#second-level4 .nav_in {
		margin-left: 5px;
	}
	.btn_shop {
		position: absolute;
		top: 7px;
		right: 0;
	}
	.btn_shop a {
		display: block;
		background: #093C87;
		color: #fff;
		width: 180px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		border-radius: 20px;
	}
	.btn_shop a:link {
		color: #fff;
		text-decoration: none;
	}
	.btn_shop a:visited {
		color: #fff;
		text-decoration: none;
	}
	.btn_shop a:hover {
		opacity: 0.8;
	}
	.btn_shop .fa-briefcase {
		margin-right: 5px;
	}
	.head_btn {
		position: absolute;
		top: 39px;
		right: 0;
	}
	.modal {
		display: block;
		width: 960px;
		max-width: 100%;
		height: 495px;
		position: fixed;
		z-index: 100;
		left: 50%;
		top: 35%;
		transform: translate(-50%, -50%);
		/* margin: -200px 0 0 -200px; */
		background: #f2f2f2;
		box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.1);
	}
	.closed {
		display: none;
	}
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 50;
		background: rgba(0, 0, 0, 0.2);
	}
	.modal-guts {
		position: absolute;
		top: 0;
		left: 0;
		width: 94%;
		overflow: auto;
		padding: 30px;
	}
	.modal .close-button {
		position: absolute;
		z-index: 1;
		top: 10px;
		right: 20px;
		border: 0;
		background: black;
		color: white;
		padding: 5px 10px;
		font-size: 1.3rem;
		display: block;
		width: 36px;
		height: 36px;
		border: 1px solid #333;
		background: #fff;
	}
	.modal .modal_in {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
	}
	.modal_in .modal_l {
		width: 20%;
	}
	.modal_in .modal_r {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 80%;
	}
	.modal .modal_in dl {
		width: 32%;
	}
	.modal .modal_in dt {
		font-size: 1.1rem;
		font-weight: bold;
		letter-spacing: 1px;
		margin-top: 24px;
	}
	.modal .modal_in dt a {
		font-weight: bold;
	}
	.modal .modal_in dt a:link {
		color: #111;
		text-decoration: none;
	}
	.modal .modal_in dt a:visited {
		color: #111;
		text-decoration: none;
	}
	.modal .modal_in dt a:hover {
		opacity: 0.8;
		text-decoration: underline;
	}
	.modal .modal_in dd {
		margin-top: 8px;
		letter-spacing: 1.5px;
	}
	.modal .modal_in dd a:link {
		color: #111;
		text-decoration: none;
	}
	.modal .modal_in dd a:visited {
		color: #111;
		text-decoration: none;
	}
	.modal .modal_in dd a:hover {
		color: #111;
		text-decoration: underline;
	}
	.modal .modal_in .nav_in {
		text-indent: 16px;
	}
/*=============================
.btn-trigger
=============================*/
	.btn-trigger {
		position: relative;
		width: 40px;
		height: 25px;
		cursor: pointer;
	}
	.btn-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #333;
		border-radius: 4px;
	}
	.btn-trigger, .btn-trigger span {
		display: inline-block;
		transition: all .5s;
		box-sizing: border-box;
	}
	.btn-trigger span:nth-of-type(1) {
		top: 0;
	}
	.btn-trigger span:nth-of-type(2) {
		top: 11px;
	}
	.btn-trigger span:nth-of-type(3) {
		bottom: 0;
	}
/*=============================
#btn
=============================*/
	#btn01.active span:nth-of-type(1) {
		-webkit-transform: translateY(20px) rotate(-45deg);
		transform: translateY(20px) rotate(-45deg);
	}
	#btn01.active span:nth-of-type(2) {
		opacity: 0;
	}
	#btn01.active span:nth-of-type(3) {
		-webkit-transform: translateY(-20px) rotate(45deg);
		transform: translateY(-20px) rotate(45deg);
	}
	.square_btn::before, .square_btn::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 3px; /* 棒の幅（太さ） */
		height: 27px; /* 棒の高さ */
		background: #333; /* バツ印の色 */
	}
	.square_btn::before {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	.square_btn::after {
		transform: translate(-50%,-50%) rotate(-45deg);
	}

}