@charset "UTF-8";

.contentpage .m_img_area {
	background-image: url("../images/break/m_img@2x.jpg");
}
.contentpage .m_img_area .m_title{
	max-width: 1258px;
	width: 83.8666764vw;
}

.bre_fs18 {
	font-size: min(115%,2vw);
}
.bre_fs21 {
	font-size: min(130%,2.2vw);
	letter-spacing: 0.15em;
}
.pink{	color: #b0726b;}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.contentpage .m_img_area {
	background-image: url("../images/break/m_img_sp@2x.jpg");
}
.bre_fs18 {
	font-size: 110%;
}
.bre_fs21 {
	font-size: 120%;
	letter-spacing: 0.1em;
}
}




/* chapter1
---------------------------------------------------------*/
#chapter1 .bg{
	background: url("../images/break/abs2@2x.png")no-repeat top left #073b66;
	background-size: 60% auto;
	padding: 145px 0;
	color: #fff;
}
#chapter1 .bdr{
	border-bottom: 1px solid #fff;
	padding-bottom: 85px;
	margin-bottom: 85px;
}
#chapter1 .bdr.box1{
	padding-bottom: 130px;
}
#chapter1 .bdr:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
#chapter1 h3 span,
.bre_index1 span{
	display: block;
}
#chapter1 h3 span:nth-child(1){
	font-size: min(250%,3.2vw);
	letter-spacing: 0.1em;
	line-height: 1.6em;
}
#chapter1 h3 span:nth-child(2){
	font-size: 530%;
	font-size: min(530%,6.5vw);
	letter-spacing: 0.17em;
	line-height: 1.6em;
}
.bre_index1{
	font-size: min(250%,3.2vw);
	letter-spacing: 0.15em;
	line-height: 1.6em;
}
#chapter1 .maru li{
	position: relative;
	font-size: min(140%,2vw);
	letter-spacing: 0.15em;
	line-height: 1em;
	width: 10em;
	height: 10em;
	border-radius: 50%;
	background: #e6ebf0;
	display: inline-block;
	margin-right: .7em;
}
#chapter1 .maru li:last-child{
	margin-right: 0;
}
#chapter1 .maru li p{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: 0 auto;
	line-height: 1.5em;
}

.bre_index2 {
	position: relative;
	text-align: center;
}
.bre_index2 .ft_ivy{
	font-size: min(1200%,15vw);
	letter-spacing: 0.01em;
	line-height: 1em;
	opacity: .2;
	color: #fff;
}
.bre_index2 .ft_ryo{
	position: absolute;
	top: 60%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size: min(200%,3vw);
	letter-spacing: 0.1em;
	line-height: 1.5em;
}

/*box1*/
#chapter1 .box1 .inbox{
	position: relative;
}
#chapter1 .box1 .inbox .img{
	position: absolute;
	width: 45%;
}
#chapter1 .box1 .inbox .img::before{
	position:absolute;
	display:block;
	content:"";
	background: linear-gradient(to right,  rgba(7,59,102,1) 0%,rgba(7,59,102,0) 100%); 
	background-size:100% auto;
	width: 40%;
	height:100%;
	top:0;
}
#chapter1 .box1 .inbox .img.flt_l::before{
	left:0;
}
#chapter1 .box1 .inbox .img.flt_r::before{
	background-position:top right;
	background: linear-gradient(to right,  rgba(7,59,102,0) 0%,rgba(7,59,102,1) 100%); 
	right:0;
}
#chapter1 .box1 .inbox .img.flt_l{
	left: -8.5%;
	top: 2em;
}
#chapter1 .box1 .inbox .img.flt_r{
	right: -8.5%;
	top: 6.5em;
}
#chapter1 .box1 .txtbox{
	width: 59.5%;
}
#chapter1 .box1 .txtbox ul{
	background: #e6ebf0;
	padding: 1em 2em;
	box-sizing: border-box;
	border-radius: 15px;
	margin: 1.5em 0;
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}
#chapter1 .box1 .txtbox ul li:nth-child(odd){
	width: 40%;
}
#chapter1 .box1 .txtbox ul li:nth-child(even){
	width: 56.2%;
}
#chapter1 .box1 .txtbox ul li{
	position: relative;
	padding-left: 1.9em;
	box-sizing: border-box;
	line-height: 1.9em;
}
#chapter1 .box1 .txtbox ul li::before{
	position: absolute;
	display: block;
	content: "";
	background: #073b66;
	background-size: 100% auto;
	width: .9em;
	height: .9em;
	top: .5em;
	left: 0;
	border-radius: 50%;
}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1500px) {
#chapter1 .box1 .inbox .img::before{
	display:none;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#chapter1 .bg{
	padding: 12% 0;
}
#chapter1 .bdr{
	padding-bottom: 8%;
	margin-bottom: 8%;
}
#chapter1 .bdr.box1{
	padding-bottom:8%;
}

/*box1*/
#chapter1 .box1 .inbox .img{
	width: 42%;
}
#chapter1 .box1 .inbox .img.flt_l{
	left: -4%;
	top: 10vw;
}
#chapter1 .box1 .inbox .img.flt_r{
	right: -4%;
	top: 12vw;
}
#chapter1 .box1 .inbox .img::before{
	display:none;
}
#chapter1 .box1 .txtbox ul{
	padding: 1em;
	border-radius: 10px;
	margin: 1em 0;
}
#chapter1 .box1 .txtbox ul li{
	padding-left: 1.3em;
}
#chapter1 .box1 .txtbox ul li::before{
	top: .4em;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#chapter1 .bg{
	padding: 15% 0;
}
#chapter1 .bdr{
	padding-bottom: 12%;
	margin-bottom:12%;
}
#chapter1 .bdr.box1{
	padding-bottom: 10%;
}
#chapter1 h3 span:nth-child(1){
	font-size:130%;
	letter-spacing: 0.1em;
}
#chapter1 h3 span:nth-child(2){
	font-size: 250%;
	letter-spacing: 0.1em;
}
.bre_index1{
	font-size: 130%;
	letter-spacing: 0.05em;
}
#chapter1 .maru li{
	font-size:100%;
	letter-spacing: normal;
	width: 8em;
	height: 8em;
	margin-right: .5em;
	margin-top:.4em;
}
#chapter1 .maru li:nth-child(-n+2){
	margin-top: 0;
}
#chapter1 .maru li:nth-child(2n),
#chapter1 .maru li:last-child{
	margin-right: 0;
}
#chapter1 .maru li p{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: 0 auto;
	line-height: 1.5em;
}
.bre_index2 .ft_ivy{
	font-size:440%;
}
.bre_index2 .ft_ryo{
	font-size: 110%;
}

/*box1*/
#chapter1 .box1 .inbox .img{
	position: static;
	width: 100%;
	margin: 0 auto;
}
#chapter1 .box1 .inbox .img.flt_l{
	margin-left: -4.5%;
	margin-top: -5em;
	margin-bottom: -3em;
}
#chapter1 .box1 .inbox .img.flt_r{
	margin-right: -4.5%;
	margin-top: -1.5em;
}
#chapter1 .box1 .inbox .img::before{
	display:none;
}
#chapter1 .box1 .txtbox{
	width: 100%;
}
#chapter1 .box1 .txtbox ul{
	padding: .8em 1em;
	border-radius: 10px;
	margin: 1em 0;
	display: block;
}
#chapter1 .box1 .txtbox ul li{
	width: 100%!important;
	padding-left: 1.2em;
}
}





/* bre_arrow_list
---------------------------------------------------------*/
.bre_arrow_list li{
	position: relative;
	padding-left: 1em;
	box-sizing: border-box;
}
.bre_arrow_list li::before{
	position: absolute;
	display: block;
	content: "";
	background: url("../images/break/abs3.svg")no-repeat top left;
	background-size: 100% auto;
	width:.65em;
	height:.7em;
	top: .45em;
	left: 0;
}






/* bre_col3
---------------------------------------------------------*/
.bre_col3{
	display: flex;
    justify-content: space-between;
	max-width: 1230px;
	margin-left: auto;
	margin-right: auto;
}
.bre_col3 > li{
	width: 30.5%;
}
.bre_col3 .tit{
	text-align: center;
    font-size: min(170%,2vw);
	letter-spacing: 0.1em;
	line-height: 1.4em;
	margin-top: 1.1em;
	height: 3.6em;
}
.bre_col3 .tit span{
	font-size: 70%;
	letter-spacing:normal;
}
.bre_col3 .tit p:nth-child(2){
	margin-top: -0.2em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.bre_col3 > li{
	width: 32%;
}
.bre_col3 .tit{
	letter-spacing: 0.05em;
}
.bre_col3 .tit span{
	letter-spacing: 0.01em;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.bre_col3{
	display: block;
}
.bre_col3 > li{
	width: 100%;
	margin-bottom: 10%;
}
.bre_col3 > li:last-child{
	margin-bottom: 0;
}
.bre_col3 .img{
	width: 65%;
	margin: 0 auto;
}
.bre_col3 .tit{
    font-size: 120%;
	margin-top: .7em;
	height: auto;
	margin-bottom: .3em;
}
}






/* bre_colbg
---------------------------------------------------------*/
.bre_colbg{
	text-align: center;
}
.bre_colbg li{
	display: inline-block;
	position: relative;
	font-size:min(110%,1.8vw);
	color: #fff;
	aspect-ratio: 276 / 276;
	width: min(276px,21vw);
	margin-right: min(1.3em,0.5vw);
}
.bre_colbg li:last-child{
	margin-right: 0;
}
.bre_colbg li .txt{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: 0 auto;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.bre_colbg li{
	font-size: 95%;
	width: 49%;
	margin-right: 1%;
}
.bre_colbg li:nth-child(2n){
	margin-right: 0;
}
}







/* bre_icon_col
---------------------------------------------------------*/
.bre_icon_col{
	display: flex;
    justify-content: space-between;
	max-width: 1290px;
	margin-left: auto;
	margin-right: auto;
}
.bre_icon_col > li{
	position: relative;
	width: 31.8%;
	text-align: center;
	padding: 0 4% 4em;
	box-sizing: border-box;
}
.bre_icon_col > li::before{
	position: absolute;
	display: block;
	content: "";
	background: #f8f8f8;
	background-size: 100% auto;
	width: 100%;
	height: calc(100% - 2em);
	bottom: 0;
	left: 0;
	border-radius: 10px;
	z-index: -1;
}
.bre_icon_col > li:nth-child(2)::before{background: #eef1f4;}
.bre_icon_col > li:nth-child(3)::before{background: #f7f1f0;}

.bre_icon_col .icon{
	width: min(140px,10vw);
	margin: 0 auto 3em;
}
.bre_icon_col dt{
    font-size: min(170%,2.5vw);
	letter-spacing: 0.15em;
	line-height: 1.5em;
}
.bre_icon_col dd{
    font-size: min(130%,1.8vw);
	letter-spacing: 0.1em;
	line-height: 1.5em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.bre_icon_col > li{
	width: 32%;
	padding: 0 3% 4%;
}
.bre_icon_col .icon{
	margin: 0 auto 2vw;
}
.bre_icon_col dt{
	letter-spacing: 0.1em;
}
.bre_icon_col dd{
	letter-spacing: normal;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.bre_icon_col{
	display: block;
}
.bre_icon_col > li{
	width:100%;
	padding: 0 4% 5%;
	margin-bottom: 8%;
}
.bre_icon_col > li:last-child{
	margin-bottom: 0;
}	
.bre_icon_col > li::before{
	height: calc(100% - 1em);
}
.bre_icon_col .icon{
	width: 20vw;
	margin: 0 auto 3%;
}
.bre_icon_col dt{
    font-size: 120%;
	letter-spacing: 0.1em;
}
.bre_icon_col dd{
    font-size: 100%;
}
}