@charset "utf-8";

/* *****************************************************************************
   タブレット用のスタイル記述
***************************************************************************** */
@media screen and (min-width: 481px) {
	/* -----------------------------------------------------------------------------
	 個別設定
	----------------------------------------------------------------------------- */
	/* Header + Hero (101614_1 custom) */
	header{
		height: 60px;
	}
	header.style1 > .inner > .logo{
		height: 60px;
	}
	header > .inner > .logo h1{
		font-size: 15px;
		font-weight: 400;
	}

	#top-contents{
		padding: 32px 24px 34px;
	}
	#top-contents .layer1{
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	.hero-tag{
		font-size: 17px;
	}
	.hero-point-list li{
		font-size: 19px;
	}
	.aio-top-bottom p{
		font-size: clamp(40px, calc(1.742vw + 31.62px), 45px);
	}
	.hero-form{
		padding: 20px 20px 30px;
	}
	.hero-form-head .ttl{
		font-size: 22px;
	}
	.aio-top-about{
		padding: 4rem 3rem 2.5rem;
	}

	/* Contents1 (AIO problem section) */
	.aio-problem-wrap .aio-problem-list{
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}
	.aio-problem-wrap .aio-problem-item{
		flex: 0 1 calc((100% - 16px) / 2);
	}
	.aio-problem-wrap .aio-problem-item:nth-child(1)::after{
		bottom: -20px;
		left: 100px;
		clip-path: polygon(10% 0, 100% 100%, 90% 0);
	}
	.aio-problem-wrap .aio-problem-item:nth-child(2)::after{
		left: auto;
		right: 100px;
		bottom: -15px;
		clip-path: polygon(16% 0, 0 100%, 100% 0);
	}
	.aio-problem-wrap .aio-problem-item:nth-child(3)::after{
		bottom: 0px;
	}
	.aio-overview-card{
		padding: 28px 24px 22px;
	}
	.aio-overview-image{
		max-width: 450px;
		margin-left: auto;
		margin-right: auto;
	}
	.aio-overview-card h3{
	}
	.aio-box h4{
		font-size: 24px;
	}
	.aio-box p{
		font-size: 18px;
	}
	.aio-overview-cta small{
		font-size: 18px;
	}

	/* Contents2 (AIO features section) */
	.aio-features-kicker{
		font-size: 14px;
	}
	.aio-features-lead{
		font-size: 20px;
	}
	.aio-feature-card{
		padding: 24px 22px 18px;
	}
	.aio-feature-card .num{
		font-size: 86px;
	}
	.aio-feature-card .desc{
		font-size: 22px;
	}
	.aio-feature-card .note{
		font-size: 21px;
	}

	/* Contents_bg2 (AIO flow section) */
	.contents.contents_bg2 > .w1024{
		padding: 56px 18px 62px;
	}
	.aio-flow-list{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		column-gap: 12px;
		row-gap: 18px;
		justify-content: center;
		align-items: stretch;
	}
	.aio-flow-row-note{
		grid-column: 3;
		grid-row: 1 / span 2;
		margin: 0;
	}
	.aio-flow-item{
		margin-bottom: 25px;
	}
	.aio-flow-item:nth-of-type(1){
		grid-column: 1;
		grid-row: 1;
	}
	.aio-flow-item:nth-of-type(2){
		grid-column: 2;
		grid-row: 1;
	}
	.aio-flow-item:nth-of-type(1):after{
		left: auto;
		right: -15px;
		bottom: auto;
		top: 50%;
		transform: translateY(-50%);
		width: 15px;
		height: 30px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}
	.aio-flow-item:nth-of-type(1) .body .title,
	.aio-flow-item:nth-of-type(2) .body .title{
		min-height: 2.8em;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.aio-flow-item:nth-of-type(3){
		grid-column: 1 / span 2;
		grid-row: 2;
		width: auto;
		justify-self: stretch;
	}
	.aio-flow-item:nth-of-type(4){
		grid-column: 1 / span 2;
		grid-row: 3;
	}
	.aio-flow-item:nth-of-type(5){
		grid-column: 1 / span 2;
		grid-row: 4;
	}
	.aio-flow-side-note{
		grid-column: 3;
		margin: 0;
	}
	.aio-flow-side-note.type-4{
		grid-row: 3;
	}
	.aio-flow-side-note.type-5{
		grid-row: 4;
	}
	.aio-flow-item .aio-flow-image{
		width: auto;
	}
	/* Pricing section */
	.aio-pricing-lead{
		font-size: 19px;
	}
	.aio-pricing-head .plan{
		font-size: 30px;
	}
	.aio-pricing-head .price{
		font-size: 40px;
	}
	.aio-pricing-head .sub{
		font-size: 15px;
	}
	.aio-price-item{
		gap: 12px;
	}
	.aio-pricing-body{
		padding-top: 30px;
	}
	.aio-price-item .txt p{
		font-size: 23.5px;
	}
	/* Success cases section */

	/* Voice section */
	.aio-voice-card .comment{
		font-size: 16px;
	}
	.aio-voice-card .meta strong{
		font-size: 15px;
	}
	.aio-voice-card .meta .voice-info{
		font-size: 13px;
	}

	/* FAQ section */
	.aio-faq-item .faq-q-row,
	.aio-faq-item .faq-a-row{
		gap: 12px;
	}
	.aio-faq-item .faq-a-row{
		margin-left: 10px;
	}

	/* Contact section */
	.aio-contact-btns .mail_button{
		font-size: 21px;
	}

	/* Global typography tune */
	.hero-lead{ font-size: clamp(24px, 3.4vw, 38px); }

	.aio-problem-title,
	.parts-h1{ font-size: clamp(36px, 4.2vw, 52px); }

	.aio-problem-desc,
	.aio-features-lead,
	.aio-pricing-lead{ font-size: 17px; }

	.aio-feature-card .desc{ font-size: 16px; }

	.aio-pricing-head .plan{ font-size: 28px; }
	.aio-pricing-head .price{ font-size: 38px; }
	.aio-pricing-head .sub{ font-size: 14px; }
}

