@charset "UTF-8";

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    font-family: sans-serif;
}


body {
    font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
    -webkit-text-size-adjust: 100%;
}

/*共通ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*レスポンシブ対応 非表示*/
.sp {
    display: none;
}

a {
	color: #fff;
	text-decoration: none;
}

section {
	width: min(800px,90%);
    margin: 0 auto 56px;
}

section p {
    font-size: 1.2rem;
}


h5 {
    font-size: 2rem;
    margin-bottom: 8px;
	color: #002164;
}

span01 {
    display: inline-block;
}

.element small {
    font-size: 0.8rem;
    line-height: 0.2em;
}

.flex_display {
	display: flex;
	column-gap: 8px;
}

.flex_wrap {
	display: flex;
	column-gap: 24px;
}

.flex_decoration_column {
	flex-direction: column;
    justify-content: center;
	grid-row-gap: 16px;
}

.section_title {
    margin: 16px auto;
    color: #126edd;
}

h2 {
    font-size: 3rem;
    margin-bottom: 16px;
    color: #0082ff;
}

.section_title h2 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 16px;
    color: #0082ff;
}

.section_title h4 {
    text-align: center;
    font-size: 1.8rem;
    margin: 56px 0 0px;
}


.blue_bg {
    background: #f3faff;
    padding: 64px 0 40px ;
}

.blue_bg02 {
    background: #126edd;
    padding: 40px 0 40px ;
    margin-bottom: 64px;
}

.white_bg {
    background: #fff;
    padding: 24px 64px 40px;
}

.btn:hover {
    opacity: 0.7;
    transition: 0.3s;
    transform: scale(0.96);
}

/*ロゴエリア====================*/
.logo_box {
    width: min(1200px,90%);
	height:94px;
    margin: 0 auto;
}

.logo_box1 {
    display: flex;
	margin-top:24px;
    margin-left: 40px;
}

.logo_box1 img {
    width: min(240px,100%);
}

/*footer*/
.footer_box {
	padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
	flex-wrap: wrap;
	grid-row-gap: 32px;
}

.footer_box1 {
    width: min(400px,100%);
    display: flex;
    justify-content: center;
    column-gap: 24px;
}

#footer {
    width: 100%;
    margin: 0 auto;
    padding: 50px 50px;
    text-align: center;
    font-size: 0.8rem;
    color: #000000;
}

/*共通 endーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/



/*main画像-------------------------------*/

/*レスポンシブ対応 非表示*/
.sp {
    display: none;
}

.top_banner img {
    width: 100%;
}



/*トップーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.top_logo {
    width: min(1200px,90%);
    display: flex;
    /*flex-wrap: wrap;*/
    justify-content: center;
    align-items: center;
    grid-row-gap: 40px;
    margin: 0 auto 48px;
}

.top_logo img {
	width: min(560px,80%);
}

.top_logo_left{
    width: 700px;
}

.top_logo_right {
    width: min(320px,100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-row-gap: 16px;
}

.top_logo_right p {
    font-size: 2.0rem;
    color: #002164;
    font-weight: bold;
}

.top_logo_right .top_icon {
    width: 50px;
    margin-left: 100px;
}

.top_logo .status {
    width: min(220px,90%);
}


.top_bg {
    background: url("../img/bg_img02.webp");
    height: min(1200px);
    position: relative;
    padding: 100px 0 500px;
    z-index: -100;
}


.top_text{
    text-align: center;
    color: #002164;
    line-height: 1.2;
}

.top_text h1 {
    font-size: 3.9rem;
    margin-bottom: 24px;
}

.top_text span {
    font-size: 2.0rem;
    font-weight: normal;
}

.top_text img {
    width: 280px;
}

.top_text_img {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
}

.top_text_img img {
    width: min(220px,90%);
}

.top_text_img h1 {
    margin-bottom: 0px;
}

/*.accent {
    width: 35px;
    height: 48px;
    background: url("../img/accent.svg") no-repeat;
    position: absolute;
    top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 400px), calc(-50% + 55px)) ;
}*/


/*.top_point p{
    text-align: center;
    font-size: 1.8rem;
    color: #002164;
    margin-bottom: 12px;
}*/

.top_point_wrap {
    display: flex;
    justify-content: center;
    column-gap: 24px;
}

.top_point_wrap img {
    width: min(230px,90%);
}

.top_point_box {
    width: 250px;
    text-align: center;
    background: #fff;
    padding: 16px 24px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 6px;
}

/*カラー情報*/
.orange {
    color: #FF7E00;
    border: #ff9228 solid 3px;
}

.blue{
    color: #0060ff;
    border: #2879ff solid 3px;
}

.green{
    color: #10b510;
    border: #29bd29 solid 3px;
}

.bg_city img {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: -99;
}

/*プレミアムサポートとは*/
.summary_p {
    color: #002164;
    font-size: 1.3rem;
    line-height: 1.8;
}

.summary_box {
    display: flex;
    align-items: center;
    column-gap: 32px;
}

.summary_left{
    width: 100%;
}

.summary_left img{
    width: 100%;
}

.summary_right{
    width: 100%;
    line-height: 1.8;
}

.blue_bg02 p{
    color: #fff;
    width: 48%;
    font-size: 1.8rem;
    margin: 0 auto;
}


/*充実のサポート*/
.element {
    padding-bottom: 80px;
    border-bottom: 1px #ccc solid;
}

.element_wrap {
    display: flex;
    justify-content: center;
    column-gap: 24px;
    padding: 24px 0 48px;
}

.element_left {
    width: 70%;
    display: flex;
    align-items: flex-start;
    column-gap: 16px;
    line-height: 1.8;
}

.element_left img {
    width: 100px;
}

.element_left span {
    font-size: 0.8rem;
}

.element_right {
    width: 30%;
}

.element_right img {
    width: 100%;
}

h3 {
    font-size: 1.5rem;
}

/*カラー情報*/
.orange_color {
    color: #FF7E00;
}

.blue_color{
    color: #0060ff;
}

.green_color{
    color: #10b510;
	/*border-left: 8px solid #10b510;
	padding-left: 16px;
	margin-bottom: 16px;*/
}

/*対象商品*/
.subject {
    margin-bottom: 48px;
    line-height: 1.8;
}

/*特別特価*/
.special {
    display: flex;
    justify-content: center;
    column-gap: 24px;
    margin-bottom: 40px;
}

.special h2 {
    color: #d93924;
    text-align: left;
}

.special h2 span {
    color: #FFF;
    background: #d93924;
    padding: 4px 12px 3px;
    font-size: 1.8rem;
    margin-right: 16px;
}

.special_left img {
    width: 200px;
}

.special_img {
    display: flex;
    justify-content: center;
}

.special_img img {
    width: min(500px,90%);
}


/*リプレイスキャンペーン*/
.replace_bg {
    background: url("../img/bg_img03.webp") ;
    background-position: center;
    padding: 32px 0 5px;
    margin-bottom: 40px;
}

.replace img {
    width: 100%;
}

/*SNS*/
.sns {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 32px;
}

.sns_left {
    width: 50%;
}

.sns_right {
    width: 28%;
}

.sns_right img {
    width: 100%;
}

.sns_img {
    display: flex;
    justify-content: center;
    column-gap: 32px;
    margin-top: 24px;
}

.sns_img img {
    width: 80px;
}


/* スマホサイズのレスポンシブ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media (max-width: 959px) {
    
.top_logo {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    grid-row-gap: 40px;
    margin: 0 auto 48px;
}
    
    

.top_text h1 {
    font-size: 2.9rem;
    margin-bottom: 24px;
}

.top_text span {
    font-size: 1.6rem;
    font-weight: normal;
}

.top_text img {
    width: 200px;
}

    
.top_logo img {
	width: 100%;
}

.top_logo_left{
    width: 80%;
}

.top_logo_right {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-row-gap: 24px;
}

.top_logo_right p {
    font-size: 2.0rem;
    color: #002164;
    font-weight: bold;
}

.top_logo_right .top_icon {
    width: 50px;
    margin-left: 0;
}

.top_logo .status {
    width: min(220px,90%);
}
    
    
    
    .top_bg {
    height: min(1380px);
}
    
    
.top_point_wrap {
    flex-wrap: wrap;
    grid-row-gap: 24px;
}

.top_point_wrap img {
    width: min(160px,90%);
}
    
    
   }

/* スマホサイズのレスポンシブ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media (max-width: 768px) {
     
.top_bg {
    height: min(1420px);
} 
    
.top_point_wrap {
    flex-wrap: wrap;
    align-items: center;
    grid-row-gap: 24px;
}

.top_point_wrap img {
    width: min(150px,90%);
}
    
    
.top_text h1 {
    font-size: 2.4rem;
    margin-bottom: 24px;
}

.top_text span {
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 2.5;
}
    
.top_text img {
    width: 160px;
}
    
    

.top_text_img {
    flex-wrap: wrap;
    grid-row-gap: 0px;
    margin-bottom: 24px;
}

.top_text_img img {
    width: min(220px,100%);
}

.top_text_img h1 {
    margin-bottom: 0px;
}

h2 {
    font-size: 2.4rem;
}

.section_title h2 {
    font-size: 2.2rem;
}
    
    

.logo_box1 {
    display: flex;
    justify-content: center;
	margin-top:24px;
    margin-left: 40px;
}

.logo_box1 img {
    width: min(240px,100%);
}
	
	.flex_wrap {
	flex-wrap: wrap;
		justify-content: center;
		grid-row-gap: 32px;
}
    
    

.summary_box {
    flex-wrap: wrap;
}
    

.summary_left{
    width: 50%;
    margin: 0 auto 24px;
}
    
.blue_bg02 p{
    width: 80%;
}
    
    /*充実のサポート*/
.element {
    padding-bottom: 80px;
    border-bottom: 1px #ccc solid;
}

.element_wrap {
    flex-wrap: wrap;
    grid-row-gap: 24px;
}

.element_left {
    width: 100%;
}

.element_right {
    width: 60%;
}

    /*特別特価*/
.special {    
    flex-wrap: wrap;
}

.special h2 {
    text-align: center;
}

.special_left img {
    width: 180px;
}
    
/*リプレイスキャンペーン*/

    .pc {
        display: none;
    }
    
    .sp {
        display: block;
    }

.footer_box {
    flex-wrap: wrap;
    grid-row-gap: 24px;
}

    
}

/* スマホサイズのレスポンシブ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media (max-width: 450px) {
    
    span01 {
        display: inline;
    }
    
.top_point_wrap {
    flex-direction: column;
    align-items: center;
    grid-row-gap: 24px;
}

.top_point_wrap img {
    width: min(180px,90%);
}  
    
.top_bg {
    height: min(1780px);
} 
    
.top_text h1 {
    font-size: 2.4rem;
    margin-bottom: 24px;
}

.top_text span {
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 2.5;
}
    
.top_text img {
    width: 160px;
}
    
h2 {
    font-size: 2.2rem;
}

.section_title h2 {
    font-size: 2.0rem;
}
    
    
}