@charset "UTF-8";
/* CSS Document */
.main_img img {
  width: 100%;
  height: auto;
}

article a {
  text-decoration: none;
}
article ul {
  overflow: hidden;
}

.cont_title {
  font-size: 160%;
  text-align: center;
  margin-bottom: 40px;
	color: #555;
}

h1,h2,h3,h4,p,ul,li{
	color: #555;
}

/* =============================================
top_main visual
================================================ */
.main_img{
	background-image: url("../img/bg/main_bg.png");
	background-size:cover;
	background-position:left;
    background-repeat:no-repeat;
}
.main_text{
	padding-top: 48px;
}
.font_min{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size:1.3125rem;
	margin-bottom: 16px;
}
.main_text h1{
	margin-bottom: 16px;
}
.main_laurel{
	margin-bottom: 32px;
}
.main_laurel img{
	height: 50px;
	width: auto;
}
.main_laurel img:first-of-type{
	margin-right: 24px;
}

/*==================================================
btn css
===================================*/
.btn_box{
	margin: 20px auto;
}
.btn_box a{
	display: inline-block;
	color: white;
	text-decoration: none;
	font-weight: bold;
	text-decoration: none;
	width: 260px;
	border-radius: 10px;
	padding: 15px 20px;
	font-size: 100%;
	margin: 0px auto;
	position: relative;
}
.btn_box a:before{
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 100%;
	right: 5%;
	top: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	background-image: url("../../common/img/yazirushi_w.svg");
}

.btn_orange a{
	border: solid 1px #D77E3A;
	background-color: #D77E3A;
}
.btn_orange a:hover{
	text-decoration: none;
	color: #D77E3A;
	background-color: #fff;
}
.btn_orange a:hover:before{
	background-image: url("../img/svg/yazirushi_o.svg");
}

.top_btn_green a{
	border: solid 1px #a7b545;
	background-color: #a7b545;
}
.top_btn_green a:hover {
	color: #a7b545;
  background: #fff;
}
.top_btn_green a:hover:before{
	background-image: url("../img/svg/yazirushi_g.svg");
}

.top_btn_blue a{
	border: solid 1px #7689b6;
	background-color: #7689b6;
}
.top_btn_blue a:hover {
	color: #7689b6;
  background: #fff;
}
.top_btn_blue a:hover:before{
	background-image: url("../../common/img/yazirushi.svg");
}

/*==================================================
h1 アニメーションcss
===================================*/
:root {
  --delay: 0;
  --duration: 800ms;
  --iterations: 1;
}
/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */

.main_text{
	width: 1280px;
	margin: 0 auto;
	padding-left: 150px;
}
.reveal-text,
.reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
	font-size:2.125rem;
	line-height: 3.8rem;
	font-weight: bold;
  animation-name: clip-text;
  color: #555;
  white-space: nowrap;
  cursor: default;
}
.reveal-text::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #D77E3A;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer;
  }
.h1text_small{
	font-size:1.875rem;
}
@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}


@keyframes text-revealer {
  
  0%, 50% {
    transform-origin: 0 50%;
  }
  
  60%, 100% {
    transform-origin: 100% 50%;   
  }

  
  60% {
    transform: scaleX(1);
  }
  
  100% {
    transform: scaleX(0);
  }
}
/*==================================================
月桂樹 アニメーションcss
===================================*/
@keyframes slideInup {
  0% {
    opacity: 0;
    transform: translate(0,50px);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
.slideInup01 {
	opacity: 0;
  animation-name: slideInup;
  animation-duration: 0.9s;
  animation-timing-function: ease;
	animation-delay: 0.2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.slideInup02 {
	opacity: 0;
  animation-name: slideInup;
  animation-duration: 0.9s;
  animation-timing-function: ease;
	animation-delay: 0.4s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/*==================================================
新規ご契約ボタンアニメーションcss
===================================*/
.updown {
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 2.4s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: 3; 
}
 
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/*==================================================
slider css
===================================*/

.l-inner{
	text-align: center;
	overflow: hidden;
	margin: 32px auto;
}
.slider a{
	display: block;
	transition:transform 0.2s ease-in;
}
.bnr_img{
	overflow: hidden;
	margin: 0 auto;
}
.bnr_img img{
	width: 90%;
	opacity: 0.6;
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 16px;
}
.l-inner .center{
	padding-left: 0;
	padding-right: 0;
}
.center .slick-center img{
	opacity: 1;
	transform: scale(1.1);
}
.slider a:hover{
	transform: scale(1.05);
}

.slick-dots li{
	width: 32px!important;
	height: 4px!important;
}
.slick-dots li button{
	width: 32px!important;
	height: 4px!important;
	color: #999999!important;
}
.slick-dots li button:before{
	content:''!important;
	width: 32px!important;
	height: 4px!important;
	opacity: .25;
  	background-color: #999;
}
.slick-prev, .slick-next{
	width: 50px!important;
	height: 50px!important;
	z-index: 3;
}
.slick-prev{
	margin-left: -32px;
}
.slick-next{
	margin-right: -32px;
}
.slick-arrow:before{
	content:""!important;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
.slick-prev:before{
	content:""!important;
	right: 0;
	background-image: url("../img/svg/slider_btn_L.svg");
	background-size: contain;
}
.slick-next:before{
	left: 0;
	background-image: url("../img/svg/slider_btn_R.svg");
	background-size: contain;
}
.slick-dots li.slick-active button:before{
	color: #999!important;
}

/*==================================================
topic_area css (NEWS & PICK UP)
===================================*/
.topic_area{
	display: flex;
	justify-content: space-between;
	margin-top: 70px;
}


/* =============================================
news
================================================ */
.news_area {
	max-width: 456px;
}
.news_area .news {
  margin-bottom: 40px;
}
.news_area .news li {
  overflow: hidden;
  margin-bottom: 10px;
	word-break: break-all;
}
.news_area .news li .date {
  float: left;
  width: 88px;
	font-size: 90%;
  line-height: 150%;
}
.news_area .news li .cate {
  font-size: 10px;
  text-align: center;
  float: left;
  width: 75px;
  color: white;
  margin-right: 15px;
}
  /*イベント*/
.news_area .news li .event {
  background: #6FA3E3;
}
  /*お知らせ*/
.news_area .news li .info {
  background: #E58F62;
}
  /*リリース*/
.news_area .news li .release {
  background: #8DB982;
}
  /*キャンペーン*/
.news_area .news li .campaign {
  background: #C3ACE3;
}
.news_area .news li .news_title {
  float: left;
	width: 100%;
  line-height: 150%;
  color: #297CCE;
  font-weight: bold;
	margin-top: 8px;
	margin-bottom: 8px;
}
.news_area .news .more {
  text-align: right;
	margin-top: 24px;
}
.news_area .banner {
  overflow: hidden;
}
.news_area .banner li {
  float: left;
  width: 48.5%;
  margin-bottom: 20px;
}
.news_area .banner li:nth-child(2n) {
  margin-left: 3%;
}
.news_area .banner img {
  width: 100%;
  height: auto;
}

/*==================================================
PICK UP css
===================================*/
.pickup{
	max-width: 456px;
}
.pickup_bn_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}
.pickup_bn_box a{
	width: 49%;
	margin-bottom: 8px;
}
.pickup_bn_box a img{
	width: 100%;
	height: auto;
}

/*==================================================
step css ASUKABOOK契約のステップ
===================================*/
.step{
	margin-top: 70px;
	background-image: url("../img/bg/step_bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 600px;
}
.step h2{
	padding-top: 70px;
	margin-bottom: 56px;
}
.step_all{
	display: flex;
	justify-content: space-between;
}
.stepbox{
	max-width: 310px;
	padding: 16px 24px;
	border: solid #7689b6 1px;
	background-color: #fff;
	box-sizing: border-box;
}
.stepbox_next{
	position: relative;
}
.stepbox_next:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #fff;
  z-index: 2;
}

.stepbox_next:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -28px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #7689b6;
  z-index: 1;
}
.step_title{
	display: flex;
	align-items: center;
}
p.step_num{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN","sans-serif";
	font-size: 2.3125rem;
	font-weight: bold;
	color: #fff;
	-webkit-text-stroke: 1px #7689b6;
  text-stroke: 1px #7689b6;
}
.step_title h3{
	font-size:1.125rem;
	margin-left: 8px;
	font-weight: bold;
}
.step_btn{
	margin-bottom: 16px;
}
.step_btn a{
	text-decoration: none;
	width: 260px;
	height: 45px;
	border-radius: 10px;
	background-color: #7689b6;
	color: #fff;
	font-size:1.125rem;
	display: inline-block;
	position: relative;
	border: solid 1px #7689b6;
	box-sizing: border-box;
}
.step_btn a span{
	position: absolute;
	top: 50%;
	transform : translateY(-50%);
}
.step_btn a img{
	padding-left: 16px;
}
.step_btn a span{
	margin-left: 56px;
	font-weight: bold;
}
.step_btn a:before{
	position: absolute;
	content: '';
	top: 50%;
	left: 16px;
	transform : translateY(-50%);
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
}
.step_btn_01-1 a:before{
	width: 30px;
	height: 24px;
	background-image: url("../img/svg/step_01_1.svg");
}
.step_btn_01-2 a:before{
	width: 30px;
	height: 22px;
	background-image: url("../img/svg/step_01_2.svg");
}
.step_btn_01-3 a:before{
	width: 30px;
	height: 15px;
	background-image: url("../img/svg/step_01_3.svg");
}
.step_btn_01-4 a:before{
	width: 28px;
	height: 28px;
	left: 17px;
	background-image: url("../img/svg/step_01_4.svg");
}
.step_btn_02-1 a:before{
	width: 30px;
	height: 25px;
	background-image: url("../img/svg/step_02_1.svg");
}
.step_btn_02-2 a:before{
	width: 28px;
	height: 27px;
	left: 17px;
	background-image: url("../img/svg/step_02_2.svg");
}
.step_btn_02-3 a:before{
	width: 30px;
	height: 18px;
	background-image: url("../img/svg/step_02_3.svg");
}
.step_btn_03-1 a:before{
	width: 30px;
	height: 25px;
	background-image: url("../img/svg/step_03_1.svg");
}
.step_btn_03-2 a:before{
	width: 28px;
	height: 28px;
	left: 17px;
	background-image: url("../img/svg/step_03_2.svg");
}
.step_btn_03-3 a:before{
	width: 21px;
	height: 28px;
	left: 22px;
	background-image: url("../img/svg/step_03_3.svg");
}

/*hover icon*/
.step_btn a:hover{
	background-color: #fff;
	color: #7689b6;
}
.step_btn_01-1 a:hover:before{
	background-image: url("../img/svg/hover/step_01_1.svg");
}
.step_btn_01-2 a:hover:before{
	background-image: url("../img/svg/hover/step_01_2.svg");
}
.step_btn_01-3 a:hover:before{
	background-image: url("../img/svg/hover/step_01_3.svg");
}
.step_btn_01-4 a:hover:before{
	background-image: url("../img/svg/hover/step_01_4.svg");
}
.step_btn_02-1 a:hover:before{
	background-image: url("../img/svg/hover/step_02_1.svg");
}
.step_btn_02-2 a:hover:before{
	background-image: url("../img/svg/hover/step_02_2.svg");
}
.step_btn_02-3 a:hover:before{
	background-image: url("../img/svg/hover/step_02_3.svg");
}
.step_btn_03-1 a:hover:before{
	background-image: url("../img/svg/hover/step_03_1.svg");
}
.step_btn_03-2 a:hover:before{
	background-image: url("../img/svg/hover/step_03_2.svg");
}
.step_btn_03-3 a:hover:before{
	background-image: url("../img/svg/hover/step_03_3.svg");
}
/*hover icon end*/

.btn_green{
	margin-top: 48px;
}
.btn_green p{
	font-size:0.875rem;
	margin-bottom: 8px;
}
.btn_green a{
	background-color: #a7b545;
	border: solid 1px #a7b545;
}
.btn_green a:hover{
	background-color: #fff;
	color: #a7b545;
}


/*==================================================
question css よくあるご質問
===================================*/
.question{
	margin-top: 70px;
}
.question .more{
	text-align: right;
	margin-top: 24px;
}

/*==================================================
catalog_dl css カタログダウンロード
===================================*/
.catalog_dl{
	margin-top: 70px;
	background-image: url("../img/bg/catalog_bg_lt.png"),url("../img/bg/catalog_bg_rb.png"),url("../img/bg/catalog_bg.png?date=260616");
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-position: top left,bottom right,center;
	background-size:  835px 116px,842px 110px,cover;
	height: 500px;
	border-top: solid 10px #a6354f;
	border-bottom: solid 10px #a6354f;
}
.catalog_dl_box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 70px;
	margin-bottom: 70px;
}
.catalog_dl_box img{
	width: 53%;
	height: auto;
}
.catalog_dl_box h3{
	font-size:1.625rem;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 10px;
}
.catalog_dl_box h3 span{
	font-size:1.5625rem;
	font-weight: bold;
}
.catalog_dl_box p{
	font-size:1.125rem;
	margin-bottom: 10px;
}
.catalog_dl_box ul{
	margin-bottom: 24px;
	color: #a6354f;
}
.catalog_dl_box ul li{
	position: relative;
	padding-left: 16px;
	line-height: 1.4;
	margin-bottom: 8px;
	font-size: 95%;
	color: #a6354f;
}
.catalog_dl_box ul li:before{
	position: absolute;
	content: '※';
	top: -2px;
	left:0;
	display: block;
}
.catalog_dl_box ul li:last-of-type{margin-bottom: 0;}
.catalog_dl_box ul li span{font-weight: bold;}

/*==================================================
start_flow　css　ご契約から初回ご注文まで
===================================*/
.start_flow{
	margin-top: 90px;
}
.start_flow_txt{
	margin-top: 16px;
	display: flex;
	justify-content: center;
}
.start_flow_txt p{
	width: 226px;
	font-size:0.9375rem;
	line-height: 1.4;
	margin-bottom: 24px;
}
.start_flow_txt p:nth-of-type(2){
	margin: 0 112px;
}
.start_flow_ex{
	margin-top: 50px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.start_flow_ex img{
	width: 94px;
	height: auto;
	margin-right: 24px;
}
.start_flow_ex_txt h4{
	font-size:1.125rem;
	font-weight: bold;
	line-height: 1.55555556;
	margin-bottom: 8px;
}
.start_flow_ex_txt p{
	font-size:0.9375rem;
	line-height: 1.6;
}
.start_flow .btn_box{
	text-align: center;
	margin-top: 60px;
}
.start_flow .btn_box a{
	text-align: left;
}

/*==================================================
start_flow　css　フロー図
===================================*/
.msr_flow {
  overflow-y:hidden;
  display: flex;
  list-style: none;
}
.msr_flow li {
  background-color: #7689b6;
  position: relative;
  padding: 20px 10px 20px 39px;
  margin: 0 30px 0 0;
  font-size:1.125rem;
	font-weight: bold;
  min-width: 258px;
  text-align: left;
  text-decoration: none;
	color: #fff;
}
.msr_flow li:first-child {
  padding-left: 38px;
}

/* 白いスペース部分 */
.msr_flow li::after {
  content: "";
 position: absolute;
 top: -30px;
 right: -90px;
 border-width:60px 40px;
 border-color: transparent transparent transparent white ;
 border-style: solid;
 z-index: 5;
}

 /*　先端部分 */
.msr_flow li::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -79px;
  border-width: 60px 40px;
  border-color: transparent transparent transparent #7689b6 ;
  border-style: solid;
  z-index: 10;
}

/* 最後のステップのレイアウト */
.msr_flow li:last-child:before, .msr_flow li:last-child:after{
  display: none;
}
.msr_flow li:last-child{
  padding-right: 3
}
/*==================================================
top_support css フォトビジネスのサポート体制
===================================*/
.top_support{
	margin-top: 90px;
}
.support_all{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 60px;
}
.support_customer{
	width: 460px;
	height: 278px;
	padding: 30px;
	box-sizing: border-box;
	background-image: url("../img/bg/support_img01.png");
	background-size: 460px 278px;
  	background-repeat: no-repeat;
}
.support_customer h4{
	font-size: 1.0625rem;
	margin-bottom: 16px;
	font-weight: bold;
}
.support_customer .support_txt>p{
	max-width: 242px;
	font-size:0.9375rem;
	line-height: 1.6;
	margin-bottom: 12px;
}
.support_icon{
	padding-left: 60px;
	margin-top: 8px;
}
.icon_free{
	position: relative;
}
.icon_free:before{
	position: absolute;
	content: '';
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	display: block;
	width: 46px;
	height: 26px;
	background-image: url("../img/svg/support_icon01.svg");
	background-size: contain;
	background-repeat: no-repeat;/*画像を繰り返さない*/
}
.icon_free p, .icon_free a{
	font-size: 1.75rem;
	font-weight: bold;
	color: #555;
}
.icon_tel{
	position: relative;
}
.icon_tel:before{
	position: absolute;
	content: '';
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	display: block;
	width: 40px;
	height: 36px;
	background-image: url("../img/svg/support_icon_tel.svg");
	background-size: contain;
	background-repeat: no-repeat;/*画像を繰り返さない*/
}
.icon_tel p, .icon_tel a{
	font-size: 1.75rem;
	font-weight: bold;
	color: #555;
}
.icon_mail{
	position: relative;
}
.icon_mail:before{
	position: absolute;
	content: '';
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	display: block;
	width: 40px;
	height: 36px;
	background-image: url("../img/svg/support_icon02.svg");
	background-size: contain;
	background-repeat: no-repeat;/*画像を繰り返さない*/
}
.icon_mail a{
	color: #555;
	font-size:1.125rem;
}
.support_sales{
	width: 460px;
	height: 278px;
	padding: 30px;
	box-sizing: border-box;
	background-image: url("../img/bg/support_img02.png");
	background-size: 460px 278px;
  	background-repeat: no-repeat;
}
.support_sales h4{
	font-size: 1.0625rem;
	margin-bottom: 16px;
	font-weight: bold;
	line-height: 1.52941176;
}
.support_sales>p{
	max-width: 242px;
	font-size:0.9375rem;
	line-height: 1.6;
	margin-bottom: 12px;
}
.top_support .btn_box{
	text-align: center;
	margin-top: 60px;
}
.top_support .btn_box a{
	text-align: left;
}

/*==================================================
top voice css ASUKABOOKユーザーの声
===================================*/
.top_voice{
	margin-top: 90px;
	background-color: #f2f2f2;
	padding-top: 60px;
	padding-bottom: 60px;
}


/*==================================================
slider voice css
===================================*/
#uservoice .slick-track{
	padding-bottom: 30px;
}
.slider_voice .slick-inner{
	background-color: #fff;
	min-height: 250px;
	margin: 0 15px;
	position: relative;
	box-shadow: 7px 7px 15px 5px rgba(0,0,0,0.1);
}
#uservoice .voice_name{
	background-color: #7689b6;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	position: relative;
}
#uservoice .voice_name:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #7689b6;
  z-index: 2;
}

#uservoice .voice_name p{
	color: #fff;
	font-weight: bold;
}
#uservoice .voice_name p:first-of-type{
	font-size:1.125rem;
	margin-right: 8px;
}
#uservoice .voice_name p:last-of-type{
	font-size:0.875rem;
	margin-bottom: 2px;
}
#uservoice .voice_txt{
	padding: 20px;
}
#uservoice .voice_txt p{
	font-size:0.9375rem;
	line-height: 1.8;
}
#uservoice .voice_txt p span{
	color: #D77E3A;
/*	font-size: 1rem;*/
	font-weight: bold;
}
#uservoice img.slide-arrow{
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 3;
	opacity: 1;
}
#uservoice img.slide-arrow:hover{
	opacity: 0.8;
}
#uservoice img.prev-arrow{
	position: absolute;
	top: 50%;
	left: 80px;
	transform: translateY(-50%);
}
#uservoice img.next-arrow{
	position: absolute;
	top: 50%;
	right: 80px;
	transform: translateY(-50%);
}
#uservoice ul.slide-dots{
	margin-block-end: 0;
	margin-top: 16px;
}



/* =============================================
top_nav_bottom
================================================ */
.top_nav_bottom {
  background: #DEE0E3;
  overflow: hidden;
	display: flex;
	justify-content: center;
}
.top_nav_bottom li {
  width: 33.3%;
  box-sizing: border-box;
  background: #DEE0E3;
  border-left: solid 1px white;
  text-align: center;
}
.top_nav_bottom li:first-of-type{
	border-left: none;
}
.top_nav_bottom a {
  text-decoration: none;
  padding: 30px 0;
  display: block;
  height: 100%;
  height: 330px;
  box-sizing: border-box;
}
.top_nav_bottom b {
  color: #555;
  font-size: 110%;
  display: block;
  text-align: center;
  margin: 10px auto;
  font-weight: bold;
}
.top_nav_bottom p {
  margin-bottom: 20px;
  font-size: 90%;
}
/* =============================================
TABLET
================================================ */
@media print, screen and (max-width: 1500px) {
	.slider_voice .slick-inner{
		min-height: 280px;
	}

	
}
@media print, screen and (max-width: 1040px) {
	
	/*==================================================
	top_support css フォトビジネスのサポート体制
	===================================*/
	.top_support{
		content: 64px;
	}
	.support_all{
		margin-top: 32px;
		flex-direction: column;
		align-items: center;
	}
	.support_customer{
		margin-bottom: 24px;
	}
	.icon_mail{
		margin-top: 16px;
	}
	.top_support .btn_box{
		margin-top: 40px;
	}
	
}
@media print, screen and (max-width: 1280px) {
	.main_text{
		padding-left: 60px;
	}
	/*==================================================
	 css メインビジュアル下スライダー
	===================================*/
	.l-inner>.center{
		width: 60%;
	}
	.bnr_img img{
		width: 80%;
		opacity: 1;
	}
	
}

/* =============================================
MOBILE
================================================ */
@media screen and (max-width: 736px) {
	body{
		padding-top: 51px;
	}  
	.cont_title {
		font-size: 140%;
		margin-bottom: 30px;
		line-height: 1.6;
	}
	
	/* =============================================
	top_main visual
	================================================ */
	.main_text{
		width: calc(100% - 40px);
		padding-left: 20px;
		padding-top: 24px;
	}
	.font_min{
		font-size:0.875rem;
	}
	.reveal-text{
		font-size:1.3125rem;
		line-height: 1.9;
	}
	.h1text_small{
		font-size:1.125rem;
	}
	.main_img{
		background-image: url("../img/bg/main_bg_m_01.png");
		background-position:top;
	}
	.main_text_mb{
		background-image: url("../img/bg/main_bg_m_02.png");
		background-size:cover;
		background-position:top;
		background-repeat: no-repeat;
		padding: 24px 0;
		box-sizing: border-box;
	}
	.main_text_mb .main_laurel{
		padding-left: 20px;
		margin-bottom: 24px;
	}
	.l-inner{
		margin: 24px 0 32px;
	}
	.l-inner>.center{
		width: 100%;
	}
	.bnr_img img{
		width: 90%;
	}
	.slick-dots li{
		margin: 0 8px!important;
	}
	/*==================================================
	btn css
	===================================*/
	.btn_box{
		text-align: center;
	}
	.btn_box a{
		text-align: left;
	}
	
	/*==================================================
	topic_area css (NEWS & PICK UP)
	===================================*/
	.topic_area{
		flex-direction: column;
		align-items: center;
	}
  /* =============================================
  news
  ================================================ */
  .news_area {
    padding-bottom: 10px;
  }
  .news_area .news {
    margin-bottom: 0px;
  }
  .news_area .news li {
    border-bottom: solid 1px #bbb;
    margin-bottom: 10px;
  }
  .news_area .news li a {
    padding: 8px 0;
    display: block;
    overflow: hidden;
  }
  .news_area .news li .news_title {
    width: 100%;
  }
  .news_area .news li:nth-child(n+7) {
    /*7番目以降非表示*/
    display: none;
  }
  .news_area .news li:first-child {
    /*先頭に線*/
    border-top: solid 1px #bbb;
	  padding-top: 10px;
  }
  .news_area .news li.more {
    display: block;
    text-align: right;
  }
  .news_area .banner {
    text-align: center;
  }
  .news_area .banner li {
    margin-bottom: 10px;
    float: none;
    width: 100%;
  }
  .news_area .banner li:nth-child(2n) {
    margin-left: 0;
  }
  .news_area li.more {
    margin: 0px auto 20px;
    text-align: right;
    border: none;
  }
  .news_area li.more a {
    padding-right: 40px;
  }

  /* =============================================
  top_cal_login
  ================================================ */
  .top_cal_login {
    overflow: hidden;
  }
  .top_cal_login .login,
  .top_cal_login .cal {
    position: relative;
    width: 50%;
    float: left;
    text-align: center;
  }
  .top_cal_login a {
    box-sizing: border-box;
    display: inline-block;
    height: 63px;
    padding: 0 0 0 30px;
    color: white;
    text-decoration: none;
  }
  .top_cal_login img {
    left: 20px;
    top: 18px;
    position: absolute;
    height: 25.5px;
  }
  .top_cal_login .login {
    background: #ABB945;
  }
  .top_cal_login .login span {
    display: block;
    font-size: 80%;
  }
  .top_cal_login .login a {
    line-height: 130%;
    padding-top: 12px;
  }
  .top_cal_login .cal {
    background: #DB7E3A;
  }
  .top_cal_login .cal a {
    line-height: 63px;
  }
	/*==================================================
	step css ASUKABOOK契約のステップ
	===================================*/
	.step{
		background-image: url("../img/bg/step_bg_m.png");
		height: auto;
		padding-bottom: 56px;
	}
	.step h2{
		padding-top: 56px;
		margin-bottom: 32px;
	}
	.step_all{
		flex-direction: column;
		align-items: center;
	}
	.stepbox_next{
		margin-bottom: 24px;
	}
	.stepbox_next:before{
		top: auto;
		right: auto;
		bottom: -24px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-top: 12px solid #FFF;
	}
	.stepbox_next:after{
		top: auto;
		right: auto;
		bottom: -28px;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-top: 14px solid #7689b6;
	}
	.btn_green{margin-top: 32px;}
	
	

	/*==================================================
	catalog_dl css カタログダウンロード
	===================================*/
	.catalog_dl{
		margin-top: 48px;
		background-image:url("../img/bg/catalog_bg_m.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		height: auto;
	}
	.catalog_dl_box{
		flex-direction: column;
		margin-top: 56px;
		margin-bottom: 56px;
	}
	.catalog_dl_box img{
		width: 80%;
		margin: 0 auto;
	}
	.catalog_dl_box h3{
		text-align: center;
		font-size: 1.375rem;
	}
	.catalog_dl_box h3 span{
		font-size:1.3125rem;
	}
	.catalog_dl_box p{font-size: 1rem; text-align: center;}
	
	/*==================================================
	start_flow　css　フロー図
	===================================*/
	.start_flow{
		margin-top: 48px;
	}
	.start_flow_all{
  		overflow-x: scroll;
		padding-bottom: 8px;
	}
	.msr_flow{
		width: 960px;
	}
	.msr_flow li{
		padding: 20px 10px 20px 54px;
		min-width: 228px;
	}
	.msr_flow li:last-of-type{
		padding: 20px 50px 20px 54px;
	}
	.start_flow_txt{
		width: 920px;
		justify-content: flex-start;
		padding-left: 38px;
		box-sizing: border-box;
	}
	.start_flow_txt p:nth-of-type(2){
		margin: 0 96px 0 98px;
	}
	.x-scroll{
		text-align: right;
		font-size:0.875rem;
	}
	.start_flow_ex{
		flex-direction: column;
		align-items: center;
	}
	.start_flow_ex img{
		margin-right: 0;
		margin-bottom: 24px;
	}
	.start_flow .btn_box{
		margin-top: 40px;
	}
	
	
	
	/*==================================================
	top voice css ASUKABOOKユーザーの声
	===================================*/
	.top_voice{
		margin-top: 56px;
		padding-bottom: 32px;
	}
	/*==================================================
	slider voice css
	===================================*/
	.slider_voice .slick-inner{
		margin: 0 8px;
	}
	#uservoice img.prev-arrow{
		width: 40px;
		height: 40px;
		left: 6px;
	}
	#uservoice img.next-arrow{
		width: 40px;
		height: 40px;
		right: 6px;
	}
	
  /* =============================================
  top_nav_bottom
  ================================================ */
	.top_nav_bottom{
		flex-direction: column;
	}
	.top_nav_bottom li {
    float: none;
    width: 100%;
    border-left: none;
    border-bottom: solid 1px white;
    text-align: left;
    font-size: 80%;
  }
  .top_nav_bottom a {
    height: auto;
    padding: 20px 5%;
    overflow: hidden;
    background: url(../../common/img/yazirushi_g.svg) no-repeat 95% center;
    background-size: 20px auto;
  }
  .top_nav_bottom b {
    display: inline-block;
  }
  .top_nav_bottom p {
    margin: 0;
  }
  .top_nav_bottom div {
    float: left;
    width: 60%;
  }
  .top_nav_bottom img {
    vertical-align: middle;
    width: 30%;
    height: auto;
  }
}

@media print, screen and (max-width: 500px) {
	.catalog_dl_box img{
		width: 100%;
	}
/* ↓↓↓ normal 2023 ↓↓↓ */
	/* =============================================
	top_main visual
	================================================ */
	.main_laurel img:first-of-type{
		margin-right: 0;
	}
	.main_text_mb .main_laurel{
		padding-left: 0;
		width: calc(100% - 60px);
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}
	.main_text_mb .main_laurel img:nth-of-type(2){
		margin-top: 16px;
	}
/* ↑↑↑ end normal 2023 ↑↑↑ */
	/*==================================================
	top_support css フォトビジネスのサポート体制
	===================================*/
	.top_support{
		content: 64px;
	}
	.support_all{
		margin-top: 32px;
	}
	.support_customer{
		background-image: none;
		padding: 0;
		width: 100%;
		height: auto;
		margin-bottom: 48px;
	}
	.support_customer h4{
		width: 100%;
		height: auto;
		padding: 20px;
		box-sizing: border-box;
		background-image: url("../img/bg/support_img01_m.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	.support_customer .support_txt>p{
		max-width: 100%;
	}
	.support_txt{
		padding: 0 20px;
	}
	.support_icon{
		margin-top: 16px;
	}
	.icon_free a{
		display: inline-block;
	}
	.support_sales{
		background-image: none;
		padding: 0;
		width: 100%;
		height: auto;
	}
	.support_sales h4{
		width: 100%;
		height: auto;
		padding: 20px;
		box-sizing: border-box;
		background-image: url("../img/bg/support_img02_m.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	.support_sales>p{
		max-width: 100%;
		padding: 0 20px;
	}
	.top_support .btn_box{
		margin-top: 30px;
	}
}

@media print, screen and (max-width: 360px) {
	/* =============================================
	top_main visual
	================================================ */
/* ↓↓↓ 20周年ver 2022 ↓↓↓ */
/*
	.main_text_mb .main_laurel img:nth-of-type(2){	
	margin-top: 8px;	
	}
*/
/* ↑↑↑ end 20周年ver 2022 ↑↑↑ */
	.main_text_mb>.btn_box a{
		width: calc(100% - 80px);
	}
	.btn_box a{
		width: calc(100% - 40px);
	}
}
@media print, screen and (max-width: 316px) {
	.reveal-text{
		font-size:1.125rem;
	}
	.stepbox{
		max-width: calc(100% - 20px);
	}
	.step_btn a{
		width: 100%;
		font-size:0.9375rem;
	}
}