@charset "utf-8";
#atowcl-contents {
	width:1000px;
	margin: 20px auto 0 auto;
}
@media screen and (max-width: 767px) {
#atowcl-contents {
	width:100vw;
	margin: 2px auto 0 auto;
}
}
/* -----------------
Header
-------------------*/
#atowcl-mainvisual {
	width:100%;
	height: 680px;
	margin: 0 auto;
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-bg-pc.png") no-repeat center top;
}
.atowcl-present_header {
	position: relative;
	display: block;
	height: 440px;
}
.atowcl-present_header h1 {
	position:absolute;
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-headline.png") no-repeat center top;
	background-size: contain;
	width: 480px;
	height: 32px;
	top:220px;
	left:57px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.atowcl-present_header p {
	position:absolute;
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-copy.png") no-repeat center top;
	background-size: contain;
	width: 488px;
	height: 64px;
	top:300px;
	left:53px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.atowcl-present_header img.atowcl-mainvisual-logo {
	position:absolute;
	top:54px;
	left:52px;
	width: 412px;
}
.atowcl-present_header img.atowcl-mainvisual-img1 {
	position:absolute;
	top:35px;
	left:520px;
	width: 214px;
}
.atowcl-present_header img.atowcl-mainvisual-img2 {
	position:absolute;
	top:15px;
	left:637px;
	width: 316px;
}
.atowcl-present_header img.atowcl-mainvisual-img3 {
	position:absolute;
	top:318px;
	left:873px;
	width: 96px;
}
@media screen and (max-width: 767px) {
#atowcl-mainvisual {
	height: 192vw;
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-bg-sp.png") repeat-y center top;
 background-size: contain;
}
.atowcl-present_header {
	height: 142.666vw;
}
.atowcl-present_header h1 {
	width: 86.266vw;
	height: 6.933vw;
	top:34.666vw;
	left:0;
 right:0;
 margin: 0 auto;
}
.atowcl-present_header p {
	width: 83.466vw;
	height: 8.266vw;
	top:47.733vw;
 left:0;
 right:0;
 margin: 0 auto;
}
.atowcl-present_header img.atowcl-mainvisual-logo {
	width: 82.933vw;
	top:8vw;
	left:0;
 right:0;
 margin: 0 auto;
}
.atowcl-present_header img.atowcl-mainvisual-img1 {
	top:66.666vw;
	left:5.6vw;
	width: 39.466vw;
}
.atowcl-present_header img.atowcl-mainvisual-img2 {
	top:61.6vw;
	left:25.466vw;
	width: 61.333vw;
}
.atowcl-present_header img.atowcl-mainvisual-img3 {
	top:119.6vw;
	left:76.8vw;
	width: 16.933vw;
}
}
/* -----------------
CampaignTitle
-------------------*/
#atowcl-mainvisual h2 {
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-title-pc.png") no-repeat center top;
	background-size: contain;
	width: 920px;
	height: 56px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0 auto;
}
#atowcl-mainvisual p.mainvisual-text {
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-text.png") no-repeat center top;
	background-size: contain;
	width: 496px;
	height: 34px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 30px auto 40px auto;
}
#atowcl-mainvisual p.mainvisual-schedule {
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-schedule-pc.png") no-repeat center top;
	background-size: contain;
	width: 906px;
	height: 28px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
#atowcl-mainvisual h2 {
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-title-sp.png") no-repeat center top;
	background-size: contain;
	width: 94.666vw;
	height: 10.666vw;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0 auto;
}
#atowcl-mainvisual p.mainvisual-text {
	width: 87.733vw;
	height: 6.266vw;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 5.333vw auto 5.333vw auto;
}
#atowcl-mainvisual p.mainvisual-schedule {
	background: url("/_var/attento/color-2022/img/atowcl-mainvisual-schedule-sp.png") no-repeat center top;
	background-size: contain;
	width: 80.266vw;
	height: 12vw;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0 auto;
}
}
/* -----------------
CampaignPresent
-------------------*/
#atowcl-present {
 width:100%;
	height: 960px;
	margin: 0 auto;
 overflow: hidden;
 background: url("/_var/attento/color-2022/img/atowcl-campaign-bg-pc.png") no-repeat center top;
}
#atowcl-present h2 {
	background: url("/_var/attento/color-2022/img/atowcl-campaign-headline.png") no-repeat center bottom;
	background-size: contain;
	width: 444px;
	height: 48px;
 display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 64px auto 24px auto;
}
#atowcl-present p {
	background: url("/_var/attento/color-2022/img/atowcl-campaign-copy.png") no-repeat center top;
	background-size: contain;
	width: 388px;
	height: 18px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0 auto 30px auto;
}
#atowcl-present ul {
 font-size: 0;
 line-height: 0;
 margin-left: 50px;
}
#atowcl-present ul li {
 list-style: none;
 display: inline-block;
 width:50%;
 height: 380px;
 margin: 0;
 position:relative;
}
#atowcl-present ul li.atowcl-present-b {
  margin: 0;
}
#atowcl-present ul li.atowcl-present-d {
  margin: 0;
}
#atowcl-present ul li img.atowcl-present-img {
 width:320px;
 position: absolute;
 top:10px;
 left:20px;
}
#atowcl-present ul li img.atowcl-present-label {
 width:196px;
 position: absolute;
 top:0;
 left:82px;
}
#atowcl-present ul li img.atowcl-present-num {
 width:92px;
 position: absolute;
 top:60px;
 right:70px;
}
#atowcl-present ul li.atowcl-present-b img.atowcl-present-num {
 top:60px;
 right:70px;
}
#atowcl-present ul li img.atowcl-present-win {
 width:96px;
 position: absolute;
 bottom:50px;
 left:0;
}
#atowcl-present ul li.atowcl-present-b img.atowcl-present-win {
 bottom:50px;
 left:0;
}
#atowcl-present ul li.atowcl-present-a img.atowcl-present-text {
 width:196px;
 position: absolute;
 bottom:90px;
 right:40px;
}
#atowcl-present ul li.atowcl-present-b img.atowcl-present-text {
 width:150px;
 position: absolute;
 bottom:90px;
 right:40px;
}
#atowcl-present ul li.atowcl-present-c img.atowcl-present-text {
 width:136px;
 position: absolute;
 bottom:90px;
 right:80px;
}
@media screen and (max-width: 767px) {
#atowcl-present {
 width:100%;
	height: 253.333vw;
	background: url("/_var/attento/color-2022/img/atowcl-campaign-bg-sp.png") repeat-y center top;
 background-size: contain;
}
#atowcl-present h2 {
	width: 82.666vw;
	height: 8.533vw;
	margin: 13.333vw auto 4.266vw auto;
}
#atowcl-present p {
	width: 72.266vw;
	height: 3.2vw;
	margin: 0 auto 8vw auto;
}
#atowcl-present ul {
 margin-left: 2.666vw;
}
#atowcl-present ul li {
 list-style: none;
 display: inline-block;
 width:100%;
 height: 53.33vw;
 margin: 0;
 position:relative;
}
#atowcl-present ul li.atowcl-present-b {
  margin: -2.666vw 0 0 43.466vw;
}
#atowcl-present ul li.atowcl-present-d {
  margin: -2.666vw 0 0 31.333vw;
}
#atowcl-present ul li img.atowcl-present-img {
 width:51.2vw;
 top:1.733vw;
 left:0;
}
#atowcl-present ul li img.atowcl-present-label {
 width:31.2vw;
 top:0;
 left:10vw;
}
#atowcl-present ul li img.atowcl-present-num {
 width:14.533vw;
 top:10.666vw;
 right:38.133vw;
}
#atowcl-present ul li.atowcl-present-b img.atowcl-present-num {
 top:8.6vw;
 right:44.79vw;
}
#atowcl-present ul li img.atowcl-present-win {
 width:15.333vw;
 bottom:0;
 left:0;
}
#atowcl-present ul li.atowcl-present-b img.atowcl-present-win {
 bottom:0;
 left:-3.66vw;
}
#atowcl-present ul li.atowcl-present-a img.atowcl-present-text {
 width:38.8vw;
 bottom:10.666vw;
 right:11.733vw;
}
#atowcl-present ul li.atowcl-present-b img.atowcl-present-text {
 width:29.6vw;
 bottom:17.333vw;
 right:92.333vw;
}
#atowcl-present ul li.atowcl-present-c img.atowcl-present-text {
 width:27.333vw;
 bottom:16vw;
 right:22.933vw;
}
}
/* -----------------
conversion
-------------------*/
#atowcl-conversion {
 width:100%;
	height: 300px;
	margin: 0 auto;
 padding: 0;
 overflow: hidden;
	background: url("/_var/attento/color-2022/img/atowcl-conversion-bg-pc.png") no-repeat center top;
 text-align: center;
  background-size: contain;
}
#atowcl-conversion h2 {
 color:#fff;
 font-size: 24px;
 line-height: 1.5em;
 font-family: "Hiragino Kaku Gothic ProN", "sans-serif";
 font-weight: 700;
 margin: 40px auto 0 auto;
}
#atowcl-conversion p {
 color:#222;
 font-size:18px;
 line-height: 1.5em;
 font-family: "Hiragino Kaku Gothic ProN", "sans-serif";
 font-weight: 400;
 margin: 30px auto;
}
#atowcl-conversion ul {
 font-size: 0;
 line-height: 0;
 margin: 0 auto;
}
#atowcl-conversion ul li {
 list-style: none;
 display: inline-block;
 width:420px;
 margin: 0 20px;
 position:relative;
}
#atowcl-conversion ul li a {
 width:420px;
  height: 3.636em;
 display:table-cell;
  vertical-align: middle;
 border-radius: 8px;
 color: #9e2c56;
 font-size:20px;
 line-height: 1.4em;
 text-decoration: none;
 font-family: "Hiragino Kaku Gothic ProN", "sans-serif";
 font-weight: 700;
 box-shadow: 0px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 0.35s;
	transition: all 0.35s;
}
#atowcl-conversion ul li a.atowcl-conversion-btn1 {
 background: #f7f9ea url("/_var/attento/color-2022/img/atowcl-conversion-icon1.png") no-repeat left 12px center / 37px 51px;
}
#atowcl-conversion ul li a.atowcl-conversion-btn2 {
 background: #f4e4ee url("/_var/attento/color-2022/img/atowcl-conversion-icon2.png") no-repeat left 12px center / 37px 51px;
}
#atowcl-conversion ul li a:hover {
 -webkit-transform: scale(1.05);
 -moz-transform: scale(1.05);
 -o-transform: scale(1.05);
 -ms-transform: scale(1.05);
 transform: scale(1.05);
	box-shadow: 0px 1px rgba(0,0,0,0.2);
}
@media screen and (max-width: 767px) {
#atowcl-conversion {
 height: 96vw;
	background: url("/_var/attento/color-2022/img/atowcl-conversion-bg-sp.png") no-repeat center top;
 background-size: cover;
}
#atowcl-conversion h2 {
  white-space: nowrap;
 font-size: clamp(15px, 4.8vw, 18px);
 margin: 9.6vw auto 0 auto;
}
#atowcl-conversion p {
 font-size:14px;
 margin: 5.33vw 5.33vw;
  text-align: left;
}
#atowcl-conversion ul li {
 display: block;
 width:80vw;
 margin: 0 auto 4.2vw auto;
}
#atowcl-conversion ul li a {
 width:80vw;
 border-radius: 2.13vw;
 font-size:15px;
 height: 13.866vw;
 box-shadow: 0px 0.8vw rgba(0,0,0,0.2);
}
#atowcl-conversion ul li a.atowcl-conversion-btn1 {
 background: #f7f9ea url("/_var/attento/color-2022/img/atowcl-conversion-icon1.png") no-repeat left 1.33vw center / 7.466vw 10.4vw;
}
#atowcl-conversion ul li a.atowcl-conversion-btn2 {
 background: #f4e4ee url("/_var/attento/color-2022/img/atowcl-conversion-icon2.png") no-repeat left 1.33vw center / 7.466vw 10.4vw;
}
}
/* -----------------
products
-------------------*/
#atowcl-products {
 width:100%;
	margin: 0 auto;
 padding: 0;
 overflow: hidden;
	background:#fcf7f9 url("/_var/attento/color-2022/img/atowcl-products-bg-pc.png") repeat-y center top;
 text-align: center;
}
#atowcl-products h2 {
 width: 920px;
 height: 56px;
 text-align: center;
 margin: 60px auto 40px auto;
 background: url("/_var/attento/color-2022/img/atowcl-outline-headline-pc.png") no-repeat center top;
 color: #fff;
 font-size:24px;
 line-height: 2.333em;
 font-family: "Hiragino Kaku Gothic ProN", "sans-serif";
}
#atowcl-products ul {
 font-size: 0;
 line-height: 0;
 margin: 0 auto;
}
#atowcl-products ul li {
 list-style: none;
 display: inline-block;
 width:250px;
 margin: 0;
 text-align: center;
 font-size:14px;
 line-height: 1.5em;
 color: #222222;
 ont-family: "Hiragino Kaku Gothic ProN", "sans-serif";
}
#atowcl-products ul li img {
 display:block;
 width: 156px;
 margin:20px auto 8px auto;
}
#atowcl-products p {
 text-align: left;
 font-size:14px;
 line-height: 1.5em;
 color: #222222;
 margin: 40px 0 30px 30px;
}
@media screen and (max-width: 767px) {
#atowcl-products {
 background:#fcf7f9 url("/_var/attento/color-2022/img/atowcl-products-bg-sp.png") repeat-y center top;
 background-size: contain;
}
#atowcl-products h2 {
 width: 94.66vw;
 height: 10.66vw;
 margin: 10.66vw auto 1.22vw auto;
 background: url("/_var/attento/color-2022/img/atowcl-outline-headline-sp.png") no-repeat center top;
 background-size: contain;
 font-size:16px;
 line-height: 10.66vw;
}
#atowcl-products ul {
 margin: 0 2.66vw;
}
#atowcl-products ul li {
 width:50%;
 font-size:12px;
}
#atowcl-products ul li img {
 width: 31.466vw;
 margin:8vw auto 1.33vw auto;
}
#atowcl-products p {
 font-size:12px;
 margin:10.666vw 4vw;
}
}
/* -----------------
outline
-------------------*/
#atowcl-outline {
	margin: 0 auto;
	width: 100%;
	background: #fff;
	padding: 0; 
}
#atowcl-outline h2 {
 width: 920px;
 height: 56px;
 text-align: center;
 margin: 60px auto 30px auto;
 background: url("/_var/attento/color-2022/img/atowcl-outline-headline-pc.png") no-repeat center top;
 color: #fff;
 font-size:24px;
 line-height: 2.333em;
 font-family: "Hiragino Kaku Gothic ProN", "sans-serif";
}
#atowcl-outline li {
	font-size: 16px;
	line-height: 1.6;
}
#atowcl-outline dl, dt, dd {
	box-sizing: border-box;
}
#atowcl-outline dl {
	color: #222222;
	margin: 0 40px;
}
#atowcl-outline dt,
#atowcl-outline dd {
	padding: 14px 8px 0 8px;
	border-top: 1px solid #dcd1d5;
 font-size: 16px;
	line-height: 1.6;
}
#atowcl-outline dt {
	width: 18%;
	float: left;
 color: #9e2c56;
	font-weight: bold;
}
#atowcl-outline dd {
	margin-left: 18%;
	padding-bottom: 15px;
 color: #222;
}
#atowcl-outline dd:after {
	content: '';
	display: block;
	clear: both;
}
#atowcl-outline dd ul {}
#atowcl-outline dd ul li{
	list-style: disc;
	margin-left: 1em;
	margin-bottom: 8px;
}
#atowcl-outline a {
 text-decoration:underline;
}
@media screen and (max-width: 767px) {
#atowcl-outline h2 {
 width: 94.66vw;
 height: 10.66vw;
 margin: 10.66vw auto 1.22vw auto;
 background: url("/_var/attento/color-2022/img/atowcl-outline-headline-sp.png") no-repeat center top;
 background-size: contain;
 font-size:16px;
 line-height: 10.66vw;
}
#atowcl-outline li {
	font-size: 14px;
}
#atowcl-outline dl, dt, dd {
	box-sizing: border-box;
}
#atowcl-outline dl {
	margin: 0 5.33vw;
}
#atowcl-outline dt,
#atowcl-outline dd {
	padding: 5.33vw 0 0 0;
	font-size: 14px;
}
#atowcl-outline dt:first-child,
#atowcl-outline dd {
 border-top: none; 
}
#atowcl-outline dt {
	width: 100%;
	float: none;
}
#atowcl-outline dd {
	margin-left: 0;
	padding-bottom: 5.33vw;
}
#atowcl-outline dd ul {}
#atowcl-outline dd ul li{
	list-style: disc;
	margin-left: 1em;
	margin-bottom: 8px;
}
}
/* clearfix */
#special_cont:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.s_br { display: none; }

.img-pc {
	display: block !important;
}
.img-sp {
	display: none !important;
}
@media only screen and (max-width: 768px) {
.img-pc {
	display: none !important;
}
.img-sp {
	display: block !important;
}
}

@media screen and (min-width: 768px) {
.br-pc {
	display: block;
}
.br-sp {
	display: none;
}
}

@media screen and (max-width: 768px) {
.br-pc {
	display: none;
}
.br-sp {
	display: block;
}
}