@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		max-width: none;
		/* max-width: 1920px; 固定幅レイアウト時 */
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}
	
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}
}

/* ================================================================================

	マージンボックス

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	/* 上にマージンを空ける
	----------------------------------------------- */
	.top_long {
		margin-top: 120px;
	}
	.top_middle {
		margin-top: 80px;
	}
	.top_short {
		margin-top: 40px;
	}
	.top_vshort {
		margin-top: 20px;
	}
	.top_mshort {
		margin-top: 10px;
	}

	/* 下にマージンを空ける
	----------------------------------------------- */
	.bottom_long {
		margin-bottom: 120px;
	}
	.bottom_middle {
		margin-bottom: 80px;
	}
	.bottom_short {
		margin-bottom: 40px;
	}
	.bottom_vshort {
		margin-bottom: 20px;
	}
	.bottom_mshort {
		margin-bottom: 10px;
	}

}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	/* 上にマージンを空ける
	----------------------------------------------- */
	.top_long {
		margin-top: 16vw;
	}
	.top_middle {
		margin-top: 12vw;
	}
	.top_short {
		margin-top: 8vw;
	}
	.top_vshort {
		margin-top: 4vw;
	}
	.top_mshort {
		margin-top: 3vw;
	}

	/* 下にマージンを空ける
	----------------------------------------------- */
	.bottom_long {
		margin-bottom: 16vw;
	}
	.bottom_middle {
		margin-bottom: 12vw;
	}
	.bottom_short {
		margin-bottom: 8vw;
	}
	.bottom_vshort {
		margin-bottom: 4vw;
	}
	.bottom_mshort {
		margin-bottom: 3vw;
	}

}



/* ================================================================================

	メイン画像

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.main_top {
		position: relative;
        background: url(../img/top_main.jpg) center top / cover no-repeat;
        height: 47.9166667vw;
		margin-top: 100px;
	}
	.main_top_in {
		position: relative;
	}

}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_top {
		position: relative;
		background: url(../img/top_main_sp.jpg) center top / contain no-repeat;
        height: 113vw;
	}
	.main_top_in {
		position: relative;
	}
}





/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

オリコン顧客満足度	

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.banner_wrap {
	 position: relative;
		width:64%;
		text-align:center;
		border :solid 5px #04345A;
		padding:20px;
		padding-bottom:40px;
		margin: 80px auto;
		font-size: 2vw;
		color:#3B4043;
	}
	.banner_wrap:before {
         position: absolute;
         content: '';
         border-top: 40px solid #04345a;
         border-right: 60px solid transparent;
         border-left: 60px solid transparent;
         top: 100%;
		left: 50%;
         transform: translateX(-50%);
	}
	.mark {
    background:linear-gradient(transparent 60%, #ff0 60%);
 
}
	.banner_wrap img {
    margin-top:1vw;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.banner_wrap {
	    position: relative;
        width: 90%;
        text-align: center;
        border: solid 4px #04345A;
        padding: 10px;
        padding-bottom: 40px;
        margin: 6vw auto;
        font-size: 1.6em;
        color: #3B4043;
		background: #fff;
	}
	.banner_wrap:before {
         position: absolute;
         content: '';
         border-top: 30px solid #04345a;
         border-right: 60px solid transparent;
         border-left: 60px solid transparent;
         top: 100%;
		left: 50%;
         transform: translateX(-50%);
		z-index:1;
	}
	.mark {
    background:linear-gradient(transparent 60%, #ff0 60%);
 
}
	.banner_wrap img {
    margin-top:5vw;
	}
}





/* ================================================================================

主な対応エリア	

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.map_wrap {
		position:relative;
		background-image:url("https://www.akaboukoland.com/wordpress/wp-content/uploads/2023/02/3995010_m.jpg");
		background-size:cover;
		background-repeat:no-repeat;
		font-size: 1.5em;
		height: 76vw;
        padding: 60px 40px;
		padding-bottom:0;
		min-height: 1180px;
}
		
	
	.map_wrap p {
        color:#3B4043;
		font-size: 1vw;
	}
	.map_wrap .big {
		font-size: 2vw;
		line-height: 210%;
}

.map_wrap h3 {
	font-size: 1.5vw;
}
	
	.right_box {
		position: absolute;
        right: 0;
         top: 10vw;
		width: 54%!important;
         padding: 4vw;
         background: #fff;
		background-image: repeating-linear-gradient(0deg, #04345A, #04345A 10px, transparent 10px, transparent 20px, #04345A 20px), repeating-linear-gradient(90deg, #04345A, #04345A 10px, transparent 10px, transparent 20px, #04345A 20px), repeating-linear-gradient(180deg,#04345A,#04345A 10px, transparent 10px, transparent 20px, #04345A 20px), repeating-linear-gradient(270deg, #04345A, #04345A 10px, transparent 10px, transparent 20px, #04345A 20px);
background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
	}
	.right_box p{
            color:#04345A;
		    font-size: 1.5vw;
		line-height: 150%;
	}
	.left_box {
		position:absolute;
		left:0;
		top: 33.5vw;
        background: #fff;
        padding: 4vw;
        width: 60%!important;
		background-image: repeating-linear-gradient(0deg, #FFF100, #FFF100 10px, transparent 10px, transparent 20px, #FFF100 20px), repeating-linear-gradient(90deg, #FFF100, #FFF100 10px, transparent 10px, transparent 20px, #FFF100 20px), repeating-linear-gradient(180deg,#FFF100,#FFF100 10px, transparent 10px, transparent 20px, #FFF100 20px), repeating-linear-gradient(270deg, #FFF100, #FFF100 10px, transparent 10px, transparent 20px,#FFF100 20px);
background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
	}
   .left_box h2 {
	   padding-bottom:1vw;
    }
    .left_box .big {
		line-height: 100%;
}
	.left_box .price {
		font-size:2.5vw;
	}
	.pic_left {
		position: absolute;
        left: -7%;
		width: 50%!important;
		top: 4.6vw;
	}
	.pic_right {
		position: absolute;
        right: -3vw;
		width: 45%!important;
		top: 38vw;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.map_wrap {
		position:relative;
		font-size: 1.5em;
		height: 438vw;
		padding: 12vw 4vw;
		
	}
	.map_wrap::before {
  	background-image:url("https://www.akaboukoland.com/wordpress/wp-content/uploads/2023/02/3995010_m.jpg");
  background-repeat:no-repeat;
  background-size: cover;/* cover指定できる */
  content: "";
  display: block;
  position: fixed;/* 擬似要素ごと固定 */
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;/* 横幅いっぱい */
  height: 100vh;/* 縦幅いっぱい */
}
	.map_wrap p {
        color:#3B4043;
		font-size: 1rem;
	}
	.right_box {
		position: absolute;
		left: 0;
		width: 100%!important;
         padding: 4vw;
          background: #fff;
		background-image: repeating-linear-gradient(0deg, #04345A, #04345A 10px, transparent 10px, transparent 20px, #04345A 20px), repeating-linear-gradient(90deg, #04345A, #04345A 10px, transparent 10px, transparent 20px, #04345A 20px), repeating-linear-gradient(180deg,#04345A,#04345A 10px, transparent 10px, transparent 20px, #04345A 20px), repeating-linear-gradient(270deg, #04345A, #04345A 10px, transparent 10px, transparent 20px, #04345A 20px);
background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
		box-sizing: border-box;
	}
	.right_box p{
            color:#04345A;
		    font-size: 1.2rem;
	}
	.left_box {
		position:absolute;
		left:0;
		top: 145vw;
		background: #fff;
       background-image: repeating-linear-gradient(0deg, #FFF100, #FFF100 10px, transparent 10px, transparent 20px, #FFF100 20px), repeating-linear-gradient(90deg, #FFF100, #FFF100 10px, transparent 10px, transparent 20px, #FFF100 20px), repeating-linear-gradient(180deg,#FFF100,#FFF100 10px, transparent 10px, transparent 20px, #FFF100 20px), repeating-linear-gradient(270deg, #FFF100, #FFF100 10px, transparent 10px, transparent 20px,#FFF100 20px);
background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
        padding: 4vw;
        width: 100%!important;
	}
	.left_box .price {
		font-size:2rem;
	}
	.pic_left {
		position: absolute;
        left: 0%;
        width: 100%!important;
        top: 70vw;
	}
	.pic_right {
		position: absolute;
        width: 100%!important;
        top: 330vw;
	}
	.map_wrap .big {
		font-size: 6vw;
        line-height: 165%;
}
}





/* ================================================================================

	赤帽KOLAND3つの強み

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.stren_wrap {
		padding: 120px 40px;
		background:#E1EFFF;
		text-align:center;
	}
	.stren_wrap h2 {
        font-size:2.8vw;
		margin-bottom: 120px;
	}
	.stren_wrap h2 span {
    color:#E7221D;
	}
	.stren_wrap h3 {
		font-size:1.5vw;
		margin-top:40px;
		margin-bottom:40px;
	}
	.stren_wrap p {
       text-align:left;
		margin-top:2vw;
		color:#3B4043;
		font-size: 1vw;
		display: inline-block;
	}
	.stren_wrap .p_card {
		position:relative;
		padding: 2.5vw 1vw;
        background:#fff;
		border-radius: 20px;
        margin-right: 3.1vw;
	}
	.stren_wrap .p_card:last-of-type {
		 margin-right: 0;
	}
	.stren_wrap .p_card img {
		width:72%;
	}
	.stren_wrap .p_num {
		position: absolute;
		top: -3.5vw;
		width: 6vw;
		left: 50%;
		transform: translate(-50%, -50%);
   　 　-webkit-transform: translate(-50%, -50%);
  　  　-ms-transform: translate(-50%, -50%);
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.stren_wrap {
		padding: 12vw 2vw;
		background:#E1EFFF;
		text-align:center;
	}
	.stren_wrap h2 {
        font-size:1.8rem;
		margin-bottom: 80px;
	}
	.stren_wrap h2 span {
    color:#E7221D;
	}
	.stren_wrap h3 {
		font-size:1.2rem;
		margin-top:20px;
		margin-bottom:20px;
	}
	.stren_wrap p {
       text-align:left;
		margin-top:4vw;
		color:#3B4043;
		display: inline-block;
	}
	.stren_wrap .p_card {
		position:relative;
		padding:4vw;
        background:#fff;
		border-radius: 20px;
        margin: 8px;
		margin-top: 20vw;
	}
	.stren_wrap .p_card:first-of-type {
		margin-top:8px;
	}
	.stren_wrap .p_card img {
		width:70%;
	}
	.stren_wrap .p_num {
		position: absolute;
		top: -8.8vw;
		width: 18vw;
		left: 50%;
		transform: translate(-50%, -50%);
   　 　-webkit-transform: translate(-50%, -50%);
  　  　-ms-transform: translate(-50%, -50%);
	}
}





/* ================================================================================

	赤帽KOLANDの買い物代行サービス

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
	.shopping_wrap {
		position:relative;
		padding: 6vw 40px;
		background-image:
			radial-gradient(25vw 25vw,#fff,#C8E6FF 20%, transparent 20%),
		   radial-gradient(38vw 38vw,#fff,#C8E6FF 20%, transparent 20%);
       background-position: 45vw 11vw, -40vw -8vw;
		background-repeat: no-repeat;
	}
	.shopping_wrap:before {
        position: absolute;
        content: '';
        border-top: 80px solid #fff;
        border-right: 120px solid transparent;
         border-left: 120px solid transparent;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
		z-index:1;
	}
	
	.shopping_wrap h2 {
        font-size: 2.8vw;
		margin-bottom: 80px;
		display:inline-block
		background: linear-gradient(transparent 60%, #ff0 60%);
	}
	.shopping_wrap h3 {
		font-size:1.8vw;
		color: #3B4043;
		margin-bottom:20px;
	}
	.shopping_wrap span {
    color:#E7221D;
	}
     .shopping_wrap p {
    text-align: left;
    margin-top: 20px;
	margin-bottom: 60px;
    color: #3B4043;
	font-size: 1.2vw;
}

}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.shopping_wrap {
		background:#fff;
		position:relative;
		padding: 12vw 4vw;
		background-image:
			radial-gradient(200px 200px,#fff,#C8E6FF 20%, transparent 20%),
		   radial-gradient(300px 300px,#fff,#C8E6FF 20%, transparent 20%);
        background-position: 
            200px 200px,
            -180px -300px;
		background-repeat: no-repeat;
	}
	.shopping_wrap:before {
        position: absolute;
        content: '';
        border-top: 30px solid #fff;
        border-right: 60px solid transparent;
         border-left: 60px solid transparent;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
		z-index:1;
	}
	
	.shopping_wrap h2 {
        font-size: 1.8rem;
        margin: 0 auto;
        margin-bottom: 20px;
        background: linear-gradient(transparent 80%, #ff0 60%);
        max-width: 270px;
        text-align: center;
        line-height: 120%;
	}
	.shopping_wrap h3 {
		font-size:1.2rem;
		color: #3B4043;
		margin-bottom:20px;
		text-align: center;
        line-height: 120%;
	}
	.shopping_wrap span {
    color:#E7221D;
	}
     .shopping_wrap p {
    text-align: left;
    margin-top: 160px;
	margin-bottom: 30px;
    color: #3B4043;
}
	.shopping_wrap .cart {
	width: 60%;
    position: absolute;
	top: -100vw;
    left: 50%;
    transform: translateX(-50%);
	}
	.shopping_wrap img {
		padding:4vw;
	}
}





/* ================================================================================

	ご依頼・お問い合わせはこちらから

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.contact_wrap {
		background-image:url("https://www.akaboukoland.com/wordpress/wp-content/uploads/2023/02/23512527.jpg");
		padding: 120px 40px;
		font-weight:bold;
	}
	.con_box {
    background:#fff;
	border:solid 10px #04345A;
	padding: 80px;
}
	.con_ttl {
		text-align:center;
		font-size: 2.8vw;
		color:#3B4043;
		
	}
	.contact_banner {
		display:flex;
		justify-content: center;
        align-items: center;
	 margin: 40px auto;
	}
	.contact_banner img {
       width:12%;
	}
	.contact_banner p {
		padding-left:16px;
		font-size: 2.5vw;
        line-height: 140%;
		
	}
	.contact_banner .t_head {
		font-size: 4vw;
	}
	.contact_banner .num {
         font-size: 5vw;
         margin-left: 1rem;
         line-height: 90%;
	}
	.contact_banner .time {
         color:#3B4043;
	}
	.btn_wrap {
		display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
}
	.btn_wrap a:last-child {
       margin-top:20px;
	}
}

/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.contact_wrap {
		background-image:url("https://www.akaboukoland.com/wordpress/wp-content/uploads/2023/02/23512527.jpg");
		padding: 12vw 4vw;
		font-weight:bold;
	}
	.con_box {
		text-align: center;
}
	.con_ttl {
		text-align:center;
		font-size:1.5rem;
		color:#3B4043;
		line-height: 120%;
		padding-bottom: 10px;
		position: relative;
        display: inline-block;
        background: #fff;
       border-radius: 30px;
      padding: 16px;
      font-weight: bold;
      color: #000;
      border: 4px solid #E7221D;
      box-sizing: border-box;
		
	}
	.con_ttl::before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  z-index: 2;
}
	.con_ttl:after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 14px;
  border-style: solid;
  border-color: #E7221D transparent transparent transparent;
  z-index: 1;
}
	.contact_banner {
		display:block;
        align-items: center;
	    margin: 20px auto;
	}
	.contact_banner img {
       width: 35%;
       margin: 0 auto;
       margin-bottom: 10px;
       display: block;
	}
	.contact_banner p {
	    font-size: 4.5vw;
        line-height: 140%;
		padding: 1.5rem 0rem 1.5rem 0rem;
        border-bottom: 5px solid #e6d900;
        background: #fff100;
		
	}
	.contact_banner .t_head {
		font-size: 5vw;
	}
	.contact_banner .num {
         font-size: 9vw;
         margin-left: 0rem;
         line-height: 100%;
	}
	.contact_banner .time {
         color:#04345A;
	}
	.btn_wrap {
		display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
}
	.btn_wrap a {
       margin-top:10px;
	}
}


/* ================================================================================

	Instagram

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.insta_wrap {
		background:#E1EFFF;
		padding: 120px 40px;
		text-align:center;
	}
	.insta_wrap h2 {
		font-size: 2.8vw;
		margin-bottom:80px;
	}
	.insta_wrap h2 span {
       color: #E7221D;
	}
	.insta_wrap a.btn-c  {
       margin-top:60px;
	}
	#sb_instagram .sbi_photo {
    display: block;
    text-decoration: none;
    height: 18vw!important;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}
}

/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.insta_wrap {
		background:#E1EFFF;
		padding: 12vw 4vw;
		text-align:center;
	}
	.insta_wrap h2 {
		font-size: 1.8rem;
		margin-bottom:40px;
	}
	.insta_wrap h2 span {
       color: #E7221D;
	}
	.insta_wrap a.btn-c {
       margin-top: 30px;
}
	#sb_instagram .sbi_photo {
    display: block;
    text-decoration: none;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}
}


/* ================================================================================

	お知らせ・新着情報

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.news_wrap {
		position:relative;
		background:#F5F5F5;
		padding: 120px 40px;
		text-align:start;
	}
	.news_wrap h2 {
		font-size: 2.8vw;
		margin-bottom:80px;
	}
	.news_wrap h2 span {
       color: #E7221D;
	}
	.news_wrap .blog_list {
		
		background:#FFFFFF;
		box-shadow: 5px 5px 5px -2px #aaaaaa52;
        padding: 80px;
		width: 80%;
        margin: 0 auto;
	}
	.news_wrap .blog_list .b_ttl {
		display:flex;
		margin: 24px auto;
        padding-bottom: 12px;
        border-bottom: 1px solid #04345A;
		font-weight: 600;
		font-size: 1.2vw;
	}
	.news_wrap .blog_list .post_date {
        padding-right:3rem;
	}
	.news_wrap .blog_list img {
		display:none;
	}
	.news_wrap .car {
		width: 10%;
       position: absolute;
       left: 80px;
       bottom: 115px;
	}
	.news_wrap .box {
       width: 8%;
       position: absolute;
       right: 80px;
       bottom: 120px;
}
	
	.news_wrap a.btn-c  {
       margin-top:60px;
		display: block;
	}
}

/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.news_wrap {
		position:relative;
		background:#F5F5F5;
		padding: 12vw 4vw;
		text-align:start;
	}
	.news_wrap h2 {
		font-size: 1.8rem;
		margin-bottom:40px;
	}
	.news_wrap h2 span {
       color: #E7221D;
	}
	.news_wrap .blog_list {
		
		background:#FFFFFF;
		box-shadow: 5px 5px 5px -2px #aaaaaa52;
        padding: 20px;
	}
	.news_wrap .blog_list .b_ttl {
		display:flex;
		margin: 24px auto;
        padding-bottom: 12px;
        border-bottom: 1px solid #04345A;
		font-weight: 600;
	}
	.news_wrap .blog_list .post_date {
        padding-right:1rem;
	}
	.news_wrap .blog_list img {
		display:none;
	}
	.news_wrap .car {
		width:20%;
		position:absolute;
		left:-13px;
		bottom:100px;
	}
	.news_wrap .box {
		width:17%;
		position:absolute;
		right:-10px;
		bottom:100px;
	}
	
	.news_wrap a.btn-c  {
       margin-top:60px;
	}
}