@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}
html {
	font-size: 62.5%;
}
body, table, input, textarea, select, option {
	font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','Noto Sans JP', sans-serif;
}
.ms {
	font-family: 'MS UI Gothic', 'ヒラギノ角ゴシック','Hiragino Sans', sans-serif;
}
.arial {
	font-family: 'Arial',sans-serif;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
	box-sizing: border-box;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
img {
	vertical-align: top;
	max-width: 100%;
    height: auto;
}
a,
a:link {
	color: #000AFF;
	text-decoration: none;
}
a:visited {
	color: #000AFF;
}
a:hover {
	opacity: 0.7;
}

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	margin: 0 auto;
	color: #000AFF;
	font-size: 1.6rem;
	line-height: 1.8;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #FFF;
}
body.fixed {
	position: fixed;
	top: 0;
	width: 100%;
}
.content {
	max-width: 1100px;
	width: 95%;
	margin: 0 auto;
}
#container {
	position: relative;
	text-align: left;
	overflow: hidden;
}
#main {
	display: block;
}
a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}
@media all and (min-width: 897px) {
	.sp {
		display: none !important;
	}
}
@media all and (max-width: 896px) {
	body {
		min-width: inherit;
		font-size: 1.5rem;
	}
	.content {
		width: 90%;
	}
	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	.pc {
		display: none !important;
	}
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
}

/*------------------------------------------------------------
	共通
------------------------------------------------------------*/
.br-tb {
	display: none;
}
.br-sp {
	display: none;
}

@media screen and (max-width:896px) {
	.br-tb {
		display: block;
	}
	.tb-off {
		display: none;
	}
}
@media screen and (max-width:430px) {
	.br-sp {
		display: block;
	}
	.sp-off {
		display: none;
	}
}

.l_yellow {
	background: linear-gradient(transparent 60%, #D8FF00 60%);
}

.fadeInup {
	opacity: 0;
	visibility: hidden;
	transform: translate(0, 30px);
	transition: 1s;
}
.fadeInup.active {
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
}


/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}
#header .header_content {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	padding-left: 40px;
}
#header .header_logo h1 {
	font-size: 1.0rem;
	display: flex;
	flex-direction: column;
}
#header .header_logo h1 span {
	font-size: 2.5rem;
}
#header .header_logo h1 .sp_ttl {
	display: none;
}
#header .header_nav nav ul {
	display: flex;
	align-items: center;
	gap: 35px;
	justify-content: center;
}
#header .header_nav nav ul li a {
	font-weight: bold;
	font-size: 1.5rem;
}
#header .hedaer_btn a {
	background-color: #000AFF;
	border-radius: 0 0 0 35px;
	display: grid;
	gap: 5px;
	justify-items: center;
	align-content: center;
	text-align: center;
	color: #fff;
	width: 130px;
	height: 130px;
	font-size: 1.7rem;
}
#header .hedaer_btn a p {
	line-height: 1.3;
}
#header .header_sp {
	display: none;
}
#header .header_btn_sp a {
	background-color: #000AFF;
	border-radius: 50vh;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px;
	align-items: center;
	color: #fff;
	padding: 8px 20px;
	font-size: 1.3rem;
}
#header .header_btn_sp a img {
	width: 22px;
}
#header .zdo_drawer_menu {
	display: none;
}

@media screen and (max-width:1200px) {
	#header .header_nav nav ul {
		gap: 20px;
	}
	#header .header_nav nav ul li a {
		font-size: 1.3rem;
	}
}
@media screen and (max-width:1035px) {
	#header .header_nav, #header .hedaer_btn {
		display: none;
	}
	#header .header_content {
		padding: 20px 65px 20px 15px;
		justify-content: space-between;
		grid-template-columns: auto auto;
	}
	#header .header_sp {
		display: block;
	}
	#header .header_logo h1 {
		font-size: clamp(0.7rem, 2.2vw, 1.0rem);
	}
	#header .header_logo h1 .pc_ttl {
		display: none;
	}
	#header .header_logo h1 .sp_ttl {
		display: block;
	}
	#header .header_logo h1 span {
		font-size: clamp(2.0rem, 6.5vw, 3.0rem);
		line-height: 1.2;
	}
	#header .zdo_drawer_menu {
		display: block;
	}
}

/*------------------------------------------------------------
	ローディング
------------------------------------------------------------*/
#splash {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1200;
	background: #fff;
	text-align:center;
}
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
#splash_logo h1 {
	font-size: 1.0rem;
	display: flex;
	flex-direction: column;
}
#splash_logo h1 span {
	font-size: 2.5rem;
}

@keyframes fadeIn{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*------------------------------------------------------------
	メインビジュアル
------------------------------------------------------------*/
#mainvisual .mainvisual_content {
	position: relative;
	align-content: flex-end;
}
#mainvisual .mainvisual_img {
	display: grid;
	grid-template-columns: 46% 1fr;
	margin-top: 75px;
}
#mainvisual .mainvisual_txt {
	position: absolute;
	left: 65%;
	top: 28%;
	transform: translate(-50%, -50%);
}
#mainvisual .mainvisual_txt p {
	font-weight: bold;
	line-height: 2.0;
}
#mainvisual .mainvisual_ttl {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%);
	width: 90%;
	text-align: center;
}
#mainvisual .mainvisual_ttl .inner {
	margin-bottom: 10px;
}
#mainvisual .mainvisual_ttl p {
	font-size: clamp(1.5rem, 4vw, 2.0rem);
	font-weight: 500;
	letter-spacing: 1px;
	font-weight: bold;
}

#header.top, #mainvisual .mainvisual_img .left, #mainvisual .mainvisual_img .right, #mainvisual .mainvisual_ttl #pc_ttl #h, #mainvisual .mainvisual_ttl #pc_ttl #b g, #mainvisual .mainvisual_ttl #pc_ttl #c g, #mainvisual .mainvisual_ttl #sp_ttl #b g, #mainvisual .mainvisual_ttl #sp_ttl #c g, #mainvisual .mainvisual_ttl p, #mainvisual .mainvisual_txt {
	opacity: 0;
}


@media screen and (max-width:896px) {	
	#mainvisual .mainvisual_img {
		grid-template-columns: 1fr;
		margin-top: 85px;
		padding-bottom: 0;
	}
	#mainvisual .mainvisual_img .left {
		width: 65%;
	}
	#mainvisual .mainvisual_img .right {
		width: 75%;
		margin-left: auto;
		margin-top: -25%;
	}
	#mainvisual .mainvisual_txt {
		left: 54%;
		top: 30%;
		width: 100%;
	}
	#mainvisual .mainvisual_txt p {
    margin: 0 5% 0 auto;
    width: fit-content;
		font-size: clamp(1.3rem, 4vw, 1.6rem);
	}
	#mainvisual .mainvisual_ttl {
    width: 90%;
		text-align: left;
		margin: -5% auto 0;
		position: static;
		transform: translate(0, 0);
	}
	#mainvisual .mainvisual_ttl .inner {
    justify-content: flex-start;
	}
	#mainvisual .mainvisual_ttl .inner h2 {
		font-size: clamp(4.0rem, 10vw, 9.5rem);
	}
}


/*------------------------------------------------------------
	トップー選ばれる理由
------------------------------------------------------------*/
#top_feature .top_feature-content {
	padding: 100px 0;
}
#top_feature .top_feature-ttl {
	text-align: center;
	margin-bottom: 30px;
}
#top_feature .top_feature-ttl h2 {
	font-size: 1.7rem;
	letter-spacing: 2px;
}
#top_feature .top_feature-list ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
#top_feature .top_feature-list ul li {
	text-align: center;
	position: relative;
	padding-bottom: 15px;
}
#top_feature .top_feature-list ul li:not(:nth-child(3n))::before {
	content: "";
	height: 100%;
	width: 1px;
	position: absolute;
	right: 0;
	top: 0;
	background-color: #E8E8E8;
}
#top_feature .top_feature-list ul li p.number {
	font-size: 2.2rem;
	font-weight: bold;
	width: fit-content;
	margin: 0 auto;
	background: url(../img/wave_icon_01.svg) repeat-x bottom left / auto 4px;
}
#top_feature .top_feature-list ul li img {
	max-width: 160px;
	margin: 10px 0;
}
#top_feature .top_feature-list ul li h3 {
	font-size: clamp(1.5rem, 4vw, 1.8rem);
	line-height: 1.5;
}
#top_feature .top_feature-list ul li h3 span {
	font-size: clamp(2.2rem, 5vw, 2.5rem);
}
#top_feature .top_feature-slider {
	overflow: hidden;
  padding: 40px 0;
	margin: 100px calc(50% - 50vw) 0;
}
#top_feature .top_feature-slider .swiper-wrapper {
  transition-timing-function: linear !important;
}
#top_feature .top_feature-slider .swiper-slide {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#top_feature .top_feature-slider .swiper-slide img {
  max-height: 300px;
  width: auto;
  display: block;
}

@media screen and (max-width:896px) {
	#top_feature .top_feature-list ul {
		grid-template-columns: 1fr;
	}
	#top_feature .top_feature-list ul li {
		padding: 40px;
	}
	#top_feature .top_feature-list ul li:first-child {
		padding-top: 0;
	}
	#top_feature .top_feature-list ul li:last-child {
		padding-bottom: 0;
	}
	#top_feature .top_feature-list ul li:not(:nth-child(3n))::before {
		height: 1px;
		width: 100%;
		right: 0;
		top: auto;
		bottom: 0;
	}
	#top_feature .top_feature-slider .swiper-slide img {
		max-height: 250px;
	}
}


/*------------------------------------------------------------
	トップーテキストスライダー
------------------------------------------------------------*/
.text_slide {
  border-top: 1px solid #000AFF;
  border-bottom: 1px solid #000AFF;
  padding: 20px 0;
  overflow: hidden;
	margin: 0 calc(50% - 50vw);
}
.text_slide .swiper-wrapper {
  transition-timing-function: linear !important;
}
.text_slide .swiper-slide {
  width: auto;
  display: flex;
  align-items: center;
}
.text_slide p {
  font-size: clamp(5.0rem, 10vw, 7.0rem);
  color: #000AFF;
  margin: 0;
  white-space: nowrap;
  padding: 0 20px;
	line-height: 1.0;
}
.text_slide p.t_outline {
  color: transparent;
  -webkit-text-stroke: 1px #000AFF;
}

@media screen and (max-width:896px) {
	.text_slide {
		padding: 10px 0;
	}
	.text_slide p {
    padding: 0 10px;
	}
}


/*------------------------------------------------------------
	トップーTシャツ
------------------------------------------------------------*/
#top_tshirt {
	background-color: #F4F4F4;
}
#top_tshirt .top_tshirt-content {
	padding-bottom: 100px;
}
#top_tshirt .top_tshirt-info {
	margin: 100px calc(50% - 50vw);
	position: relative;
	z-index: 0;
}
#top_tshirt .top_tshirt-info-img {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: min(30vw, 165px);
	align-items: center;
	width: 100%;
	position: absolute;
	top: 0;
	z-index: -1;
}
#top_tshirt .top_tshirt-info-img img {
	width: 100%;
}
#top_tshirt .top_tshirt-info-txt {
	width: 90%;
	max-width: 460px;
	text-align: center;
	margin: 0 auto;
}
#top_tshirt .top_tshirt-info-txt h2 {
	font-size: clamp(2.2rem, 5vw, 2.5rem);
}
#top_tshirt .top_tshirt-info-txt h3 {
	font-size: clamp(1.5rem, 4vw, 1.7rem);
	margin-bottom: 20px;
	letter-spacing: 2px;
}
#top_tshirt .top_tshirt-info-txt p {
	margin: 40px 0;
}
#top_tshirt .top_tshirt-info-txt ul {
	margin-bottom: 40px;
}
#top_tshirt .top_tshirt-info-txt ul li {
	background-color: #000AFF;
	color: #fff;
	border-radius: 50vh;
	padding: 19px;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: clamp(1.3rem, 4vw, 2.0rem);
}
#top_tshirt .top_tshirt-price {
	text-align: center;
}
#top_tshirt .top_tshirt-price h2 {
	font-size: clamp(2.2rem, 5vw, 2.5rem);
	padding-bottom: 0px;
	margin: 0 auto 20px;
	width: fit-content;
	background: url(../img/wave_icon_01.svg) repeat-x bottom left / auto 4px;
	letter-spacing: 2px;
}
#top_tshirt .top_tshirt-price > p {
	font-size: clamp(1.6rem, 4vw, 1.8rem);
}
#top_tshirt .top_tshirt-price > p span {
	font-size: 1.3rem;
}
#top_tshirt .top_tshirt-price ul {
	margin: 40px 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
}
#top_tshirt .top_tshirt-price ul li {
	background-color: #000AFF;
	border-radius: 10px;
	padding: 25px 10px;
}
#top_tshirt .top_tshirt-price ul li p {
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.0;
}
#top_tshirt .top_tshirt-price ul li p span {
	font-size: clamp(2.8rem, 6vw, 4.3rem);
	font-style: italic;
	font-family: 'Arial',sans-serif;
	margin-right: 5px;
}
#top_tshirt .top_tshirt-price ul li h3 {
	color: #fff;
	font-size: 1.8rem;
	line-height: 1.0;
	border-bottom: 6px solid #D8FF00;
	width: fit-content;
	margin: 0 auto;
}
#top_tshirt .top_tshirt-price ul li h3 span {
	color: #D8FF00;
	font-style: italic;
	font-size: clamp(6.0rem, 13vw, 10.4rem);
	font-family: 'Arial',sans-serif;
	margin-right: 5px;
}
#top_tshirt .top_tshirt-price .top_tshirt-price-box {
	padding: 40px 20px;
	max-width: 660px;
	margin: 0 auto;
	border-radius: 20px;
	background-image: radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%);
  background-position: top left, top right, bottom left, bottom left;
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
}
#top_tshirt .top_tshirt-price .top_tshirt-price-box p {
	font-size: clamp(2.0rem, 5vw, 2.2rem);
	font-weight: bold;
}

@media screen and (max-width:896px) {
	#top_tshirt .top_tshirt-info {
		margin-top: 50px;
	}
	#top_tshirt .top_tshirt-info-img {
		position: static;
		gap: 0;
	}
	#top_tshirt .top_tshirt-price ul {
    grid-template-columns: 1fr;
    gap: 20px;
	}
	#top_tshirt .top_tshirt-price ul li {
		display: flex;
		align-items: baseline;
		justify-content: center;
	}
	#top_tshirt .top_tshirt-price ul li h3 {
		margin: 0 0 0 15px;
	}
}


/*------------------------------------------------------------
	トップー手ぬぐい
------------------------------------------------------------*/
#top_tenugui {
	background-color: #E7E7E7;
}
#top_tenugui .top_tenugui-content {
	padding-bottom: 100px;
}
#top_tenugui .top_tenugui-info {
	margin: 100px 0 50px;
}
#top_tenugui .top_tenugui-info-txt {
	text-align: center;
}
#top_tenugui .top_tenugui-info-txt h2 {
	font-size: clamp(2.2rem, 5vw, 2.5rem);
	margin-bottom: 35px;
}
#top_tenugui .top_tenugui-info-img {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 calc(50% - 50vw);
}
#top_tenugui .top_tenugui-price {
	text-align: center;
	margin-bottom: 100px;
}
#top_tenugui .top_tenugui-price h2 {
	font-size: clamp(2.2rem, 5vw, 2.5rem);
	padding-bottom: 0px;
	margin: 0 auto 20px;
	width: fit-content;
	background: url(../img/wave_icon_01.svg) repeat-x bottom left / auto 4px;
	letter-spacing: 2px;
}
#top_tenugui .top_tenugui-price > p {
	font-size: 1.8rem;
}
#top_tenugui .top_tenugui-price > p span {
	font-size: 1.3rem;
}
#top_tenugui .top_tenugui-price ul {
	margin: 40px 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
}
#top_tenugui .top_tenugui-price ul li {
	background-color: #000AFF;
	border-radius: 10px;
	padding: 25px 10px;
}
#top_tenugui .top_tenugui-price ul li p {
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.0;
}
#top_tenugui .top_tenugui-price ul li p span {
	font-size: clamp(2.8rem, 6vw, 4.3rem);
	font-style: italic;
	font-family: 'Arial',sans-serif;
	margin-right: 5px;
}
#top_tenugui .top_tenugui-price ul li h3 {
	color: #fff;
	font-size: 1.8rem;
	line-height: 1.0;
	border-bottom: 6px solid #D8FF00;
	width: fit-content;
	margin: 0 auto;
}
#top_tenugui .top_tenugui-price ul li h3 span {
	color: #D8FF00;
	font-style: italic;
	font-size: clamp(6.0rem, 13vw, 10.4rem);
	font-family: 'Arial',sans-serif;
	margin-right: 5px;
}
#top_tenugui .top_tenugui-price .top_tenugui-price-box {
	padding: 40px 20px;
	max-width: 660px;
	margin: 0 auto;
	border-radius: 20px;
	background-image: radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%);
  background-position: top left, top right, bottom left, bottom left;
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
}
#top_tenugui .top_tenugui-price .top_tenugui-price-box p {
	font-size: clamp(2.0rem, 5vw, 2.2rem);
	font-weight: bold;
}
#top_tenugui .top_tenugui-print > h3 {
	text-align: center;
	margin-bottom: 30px;
	font-size: 1.7rem;
	letter-spacing: 2px;
}
#top_tenugui .top_tenugui-print ul li {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	margin-bottom: 50px;
}
#top_tenugui .top_tenugui-print ul li .txt {
	z-index: 1;
}
#top_tenugui .top_tenugui-print ul li .img {
	z-index: 0;
}
#top_tenugui .top_tenugui-print ul li h3 {
	font-size: clamp(2.2rem, 5vw, 2.5rem);
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 15px;
}
#top_tenugui .top_tenugui-print ul li h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% + 100px);
	height: 1.5px;
	background-color: #000AFF;
}
#top_tenugui .top_tenugui-print > h2 {
	text-align: center;
	font-size: clamp(2.2rem, 5vw, 2.5rem);
	margin-bottom: 75px;
}
#top_tenugui .top_tenugui-print-box {
	padding: 40px 20px 50px;
	margin: 0 auto;
	border-radius: 20px;
	background-image: radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%);
  background-position: top left, top right, bottom left, bottom left;
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
	text-align: center;
}
#top_tenugui .top_tenugui-print-box > h3 {
	font-size: clamp(2.0rem, 5vw, 2.2rem);
	margin-bottom: 25px;
	letter-spacing: 2px;
}
#top_tenugui .top_tenugui-print-box .list {
	margin-top: 35px;
	display: flex;
	justify-content: center;
	gap: 60px;
}
#top_tenugui .top_tenugui-print-box .list .item {
	border-radius: 10px;
	overflow: hidden;
	max-width: 350px;
	width: 100%;
	font-weight: bold;
}
#top_tenugui .top_tenugui-print-box .list .item .top {
	background-color: #D8FF00;
	font-size: 1.7rem;
	padding: 20px 10px;
	border-bottom: 5px solid #fff;
	position: relative;
}
#top_tenugui .top_tenugui-print-box .list .item .top::after {
	content: "";
	background-color: #D8FF00;
	border-bottom: 5px solid #fff;
	border-right: 5px solid #fff;
	width: 25px;
	height: 25px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 65%) rotate(45deg);
}
#top_tenugui .top_tenugui-print-box .list .item .bottom {
	background-color: #000AFF;
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 2.5rem);
	padding: 35px 10px;
}

@media screen and (max-width:896px) {
	#top_tenugui .top_tenugui-info {
    margin: 50px 0;
	}
	#top_tenugui .top_tenugui-info-img {
    grid-template-columns: 1fr;
    margin: 30px calc(50% - 50vw) 0;
    gap: 10px;
	}
	#top_tenugui .top_tenugui-price ul {
		margin: 40px 0;
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
	}
	#top_tenugui .top_tenugui-price ul li {
		display: flex;
		align-items: baseline;
		justify-content: center;
	}
	#top_tenugui .top_tenugui-price ul li h3 {
		margin: 0 0 0 15px;
	}
	#top_tenugui .top_tenugui-print ul li {
    grid-template-columns: 1fr;
    gap: 30px;
	}
	#top_tenugui .top_tenugui-print-box .list {
		flex-direction: column;
    gap: 30px;
	}
	#top_tenugui .top_tenugui-print-box .list .item {
		margin: 0 auto;
	}
}



/*------------------------------------------------------------
	トップーOEM
------------------------------------------------------------*/
#top_oem {
	background-color: #F4F4F4;
}
#top_oem .top_oem-content {
	padding-bottom: 100px;
}
#top_oem .top_oem-info {
	margin: 100px calc(50% - 50vw);
	position: relative;
	z-index: 0;
}
#top_oem .top_oem-info-img {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: min(30vw, 165px);
	align-items: center;
	width: 100%;
	position: absolute;
	top: -100px;
	z-index: -1;
}
#top_oem .top_oem-info-img img {
	width: 100%;
}
#top_oem .top_oem-info-txt {
	width: 100%;
	max-width: 460px;
	text-align: center;
	margin: 0 auto;
}
#top_oem .top_oem-info-txt h2 {
	font-size: clamp(2.2rem, 5vw, 2.5rem);
}
#top_oem .top_oem-info-txt h3 {
	font-size: 1.7rem;
	margin-bottom: 20px;
}
#top_oem .top_oem-info-txt p {
	margin: 40px 0;
}
#top_oem .top_oem-info-txt ul {
	margin-bottom: 40px;
}
#top_oem .top_oem-info-txt ul li {
	background-color: #000AFF;
	color: #fff;
	border-radius: 50vh;
	padding: 19px;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 2.0rem;
}
#top_oem .top_oem-box {
	padding: 40px 20px 50px;
	margin: 0 auto 80px;
	border-radius: 20px;
	background-image: radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%), radial-gradient(#0000ff 15%, transparent 15%);
  background-position: top left, top right, bottom left, bottom left;
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
	text-align: center;
}
#top_oem .top_oem-box-ttl {
	margin-bottom: 20px;
}
#top_oem .top_oem-box-ttl p {
	font-size: 1.8rem;
	position: relative;
	width: fit-content;
	margin: 0 auto;
}
#top_oem .top_oem-box-ttl p::before {
	content: "";
	border-left: 1px solid #000AFF;
	height: 20px;
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translate(0, -50%) rotate(-30deg);
}
#top_oem .top_oem-box-ttl p::after {
	content: "";
	border-left: 1px solid #000AFF;
	height: 20px;
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translate(0, -50%) rotate(30deg);
}
#top_oem .top_oem-box-ttl h2 {
	font-size: clamp(1.8rem, 4vw, 2.2rem);
	letter-spacing: 2px;
}
#top_oem .top_oem-box ul {
	margin-top: 50px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	gap: 20px;
}
#top_oem .top_oem-box ul li {
	background-color: #000AFF;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 23px 10px;
	max-width: 440px;
	width: 100%;
	min-height: clamp(90px, 27vw, 120px);
	display: grid;
	align-content: center;
	font-size: clamp(1.3rem, 4vw, 2.0rem);
}
#top_oem .top_oem-box ul li:nth-child(odd) {
	margin-left: auto;
}
#top_oem .top_oem-box ul li:nth-child(even) {
	margin-right: auto;
}

#top_oem .top_oem-feature {
	text-align: center;
}
#top_oem .top_oem-feature > h3 {
	font-size: 1.7rem;
	margin-bottom: 25px;
	letter-spacing: 2px;
}
#top_oem .top_oem-feature > p {
	margin-bottom: 50px;
}
#top_oem .top_oem-feature ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	margin-bottom: 100px;
}
#top_oem .top_oem-feature ul li {
	text-align: left;
}
#top_oem .top_oem-feature ul li p {
	background-color: #000AFF;
	color: #fff;
	border-radius: 5px 25px 0 0;
	padding: 10px 15px;
	width: fit-content;
	font-size: clamp(1.4rem, 4vw, 1.7rem);
	font-weight: bold;
}
#top_oem .top_oem-feature > h2 {
	font-size: clamp(2.2rem, 5vw, 2.5rem);
}

@media screen and (max-width:896px) {
	#top_oem .top_oem-info {
		margin: 50px calc(50% - 50vw);
	}
	#top_oem .top_oem-info-img {
		position: static;
		gap: 0;
	}
	#top_oem .top_oem-box ul {
    grid-template-columns: 1fr;
	}
	#top_oem .top_oem-box ul li:nth-child(odd), #top_oem .top_oem-box ul li:nth-child(even) {
		margin: 0 auto;
	}
	#top_oem .top_oem-feature ul {
    grid-template-columns: 1fr;
    gap: 50px;
	}
}


/*------------------------------------------------------------
	トップー制作実績
------------------------------------------------------------*/
#top_works .top_works-content {
	margin: 65px 0 100px;
}
#top_works .top_works-ttl {
	text-align: center;
	margin-bottom: 50px;
}
#top_works .top_works-ttl h2 {
	font-size: 1.7rem;
	margin-bottom: 20px;
	letter-spacing: 2px;
}
#top_works .top_works-list ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 70px;
}
#top_works .top_works-list ul li a img {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
	margin-bottom: 10px;
}
#top_works .top_works-list ul li p.date {
	color: #9D9D9D;
	font-size: clamp(1.2rem, 3vw , 1.4rem);
}
#top_works .top_works-list ul li h3 {
	font-size: clamp(1.5rem, 4vw, 1.7rem);
}

@media screen and (max-width:896px) {
	#top_works .top_works-list ul {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}	
}


/*------------------------------------------------------------
	トップーおすすめ
------------------------------------------------------------*/
#top_recommend .top_recommend-content {
	margin: 100px 0;
}
#top_recommend .top_recommend-ttl {
	text-align: center;
	margin-bottom: 60px;
}
#top_recommend .top_recommend-ttl h2 {
	font-size: 1.7rem;
	letter-spacing: 2px;
}
#top_recommend .top_recommend-list ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 70px 25px;
}
#top_recommend .top_recommend-list ul li {
	background-color: #000AFF;
	position: relative;
	padding: 10px;
	width: calc(100% / 3 - 17px);
	min-height: 130px;
	border-radius: 10px;
	color: #fff;
	display: grid;
	align-content: center;
}
#top_recommend .top_recommend-list ul li img {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	max-width: 75px;
}
#top_recommend .top_recommend-list ul li p {
	text-align: center;
	font-size: clamp(1.6rem, 4vw, 2.0rem);
	font-weight: bold;
	line-height: 1.5;
	padding-top: 15px;
}

@media screen and (max-width:1060px) {
	#top_recommend .top_recommend-list ul li {
		width: calc(100% / 2 - 17px);
	}
}
@media screen and (max-width:768px) {
	#top_recommend .top_recommend-list ul li {
		width: 100%;
	}
}


/*------------------------------------------------------------
	トップーよくあるご質問
------------------------------------------------------------*/
#top_faq .top_faq-content {
	margin-bottom: 100px;
}
#top_faq .top_faq-ttl {
	margin-bottom: 50px;
	text-align: center;
}
#top_faq .top_faq-ttl h2 {
	font-size: 1.7rem;
	letter-spacing: 2px;
}
#top_faq .top_faq-tab .tab-area {
  display: flex;
	justify-content: space-between;
}
#top_faq .top_faq-tab .tab {
  width: calc(100% / 3);
	background-color: #fff;
	border: 1px solid #000AFF;
  text-align: center;
	padding: 20px 0;
	border-radius: 25px 25px 0 0;
	font-size: clamp(1.1rem, 3vw, 2.0rem);
	font-weight: bold;
	line-height: 1.5;
	cursor: pointer;
}
#top_faq .top_faq-tab .tab.active {
  background-color: #000AFF;
	color: #fff;
}
#top_faq .top_faq-tab .panel {
  display: none;
	background-color: #000AFF;
	padding: 100px 95px 50px;
}
#top_faq .top_faq-tab .panel.active {
  display: block;
}
#top_faq .top_faq-tab .panel ul li {
	margin-bottom: 40px;
}
#top_faq .top_faq-tab .title {
	position: relative;
	cursor: pointer;
	font-weight: 500;
	transition: all .5s ease;
	color: #fff;
	padding: 20px 10px;
	border-bottom: 1px solid #fff;
}
#top_faq .top_faq-tab .title .title_inner {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 15px;
}
#top_faq .top_faq-tab .title span {
	font-size: 2.3rem;
	font-weight: 500;
	display: block;
	font-family: 'Arial',sans-serif;
}
#top_faq .top_faq-tab .title .txt {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 15px;
	align-items: center;
}
#top_faq .top_faq-tab .title .faq_btn {
	width: 12px;
	height: 8px;
	background-color: #fff;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	transition: 0.3s;
}
#top_faq .top_faq-tab .title.close .faq_btn {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#top_faq .top_faq-tab .box {
	display: none;
	color: #fff;
	padding: 20px 10px;
}
#top_faq .top_faq-tab .box .box_inner {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 15px;
}
#top_faq .top_faq-tab .box span {
	font-size: 2.3rem;
	font-weight: 500;
	font-family: 'Arial',sans-serif;
}

@media screen and (max-width:896px) {
	#top_faq .top_faq-tab .tab {
		padding: 14px 0;
	}
	#top_faq .top_faq-tab .panel {
    padding: 30px 15px;
	}
	#top_faq .top_faq-tab .panel ul li {
    margin-bottom: 20px;
	}
	#top_faq .top_faq-tab .title {
    padding: 15px 10px;
	}
	#top_faq .top_faq-tab .box {
    padding: 15px 10px;
	}
}


/*------------------------------------------------------------
	トップーバナー
------------------------------------------------------------*/
#top_banner .top_banner-img img {
	width: 100%;
}


/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#footer .footer_content {
	padding: 100px 0;
}
#footer .footer_logo {
	text-align: center;
	margin-bottom: 60px;
}
#footer .footer_logo a h1 {
	font-size: 1.2rem;
}
#footer .footer_logo a h1 span {
	font-size: 3.0rem;
	line-height: 1.0;
}
#footer .footer_nav {
	max-width: 650px;
	margin: 0 auto;
}
#footer .footer_nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px 50px;
}
#footer .footer_nav ul li a {
	font-size: 1.5rem;
}

@media screen and (max-width:896px) {
	#footer .footer_nav ul {
		display: grid;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
		grid-auto-flow: column;
		gap: 20px 50px;
	}
}