@charset "UTF-8";
/* CSS Document */

/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;margin-bottom:0;padding-left:0;}
img,abbr,acronym,fieldset{border:0;}
video {width: 100%;}
a, a:hover {text-decoration:none;}
a:focus,*:focus {outline:none;}
html {width:100%;font-size:62.5%;scroll-behavior: smooth;scroll-padding-top: 100px;}
/**, *:before, *:after {box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing: border-box;-ms-box-sizing:border-box;}*/
/*reset END*/

* {overflow-wrap: break-word;word-wrap: break-word;}/*連続英単語*/
.selector {font-feature-settings: "palt";}/*文字詰め*/
a:hover{opacity: .8rem;transition-duration: .4s;}

:root {
	--white:       #ffffff;
	--black:       #000000;
	--gray:        #666B6C;
	--lightgray:   #F7F7F7;
	--linegray:    #cccccc;
	--red:         #F53131;
	--lightmint:   #EAF5F5;
	--mint:        #B8DFDC;
	--darkmint:    #9BBAB8;
	--green:       #007378;
	--yellow:      #FFFAD6;
	--bgyellow:    #FFFDF0;
}
#aacp {
	width:100%;font-size:62.5%;
	font-style: normal;
	font-weight: 500;
	-webkit-text-size-adjust:100%;
	font-size:1.6rem;
	color: var(--green);
	line-height:1.666;
	letter-spacing: 0.2rem;
	font-feature-settings: "palt";
	background-color: var(--bgyellow) !important; 
	box-sizing: border-box;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	padding-top: 0;
}
#aacp img {width:100%; display:block;}
#aacp .img {
  /* フォーマット clamp(最小値, 推奨値, 最大値) */ 
  width: clamp(200px, 100%, 50%);
}
#aacp h1{
	font-size: clamp(2rem, 1.855rem + 0.73vw, 2.4rem); 
	line-height:1.666;
	margin-bottom: 2rem;
	text-align: center;
	border-bottom: 0;
}
#aacp h2{font-size: clamp(1.8rem, 1.727rem + 0.36vw, 2rem); margin-bottom: 2rem; text-align: center;}
#aacp h3{font-size: clamp(1.4rem, 1.327rem + 0.36vw, 1.6rem); margin-bottom: 1.5rem; text-align: left; font-weight: bold;}
#aacp h4{font-size: clamp(1.3rem, 1.264rem + 0.18vw, 1.4rem); margin-bottom: 1rem; text-align: left;}
#accp p{font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem); text-align: left;}
.tx-small{font-size:clamp(1rem, 0.927rem + 0.36vw, 1.2rem)!important; color: var(--gray);}
.tx-white{color: var(--white);}

#aacp .fixed-container{
	position: fixed;
	width: calc(50% - 280px);
	height: 100svh;
	padding: 4% 4% 4% 0;
	text-align: center;
}
#aacp .fixed-container.left {top: calc(50% - 114px);left:0; z-index: 0;}
#aacp .fixed-container.right{top: calc(50% - 114px);right: 0;}
#aacp .wrap {
	display: grid;
	grid-template-columns:
	auto
	min(55ch, 100%)
	auto;
	margin: 0 auto;
	text-align: left;
}
#aacp .wrap > * {
	grid-column: 2;
	background: var(--cream);
}
#aacp .full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}
#aacp .btn{
	max-width: clamp(300px, 100%, 50%);
	padding: 1.5rem 1rem; overflow: hidden;
	border: 2px solid var(--green);
	line-height: 1.4;
	margin: 0 auto 3rem; display: block;
	background-color: var(--green);
	color: var(--white);
	border-radius: 40px;
	text-align: center;
	cursor: pointer;
	position: relative;
  transition-duration: .4s;
  z-index: 2;
}
#aacp .btn:after{
	background: var(--white);
  border-radius: 50%;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
#aacp .btn:hover{color: var(--green);}
#aacp .btn:hover:after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition-delay: 0s;
  transition: opacity .8s, transform .6s ease-in-out;
}
#aacp .btn.btn-white{background-color: var(--white); border:2px solid var(--green); color: var(--green);}

#aacp .bg-green{background-color: var(--green); color: var(--white);}
#aacp .bg-mint{background-color: var(--mint);}
#aacp .bg-lightmint{background-color: var(--lightmint);}
#aacp .bg-white{background-color: var(--white);}

#aacp .contents {border-radius: 40px 40px 0 0; padding: 8% 6% 18%; margin-top: -10%;}
#aacp .contents-img{border-radius: 20px; margin-bottom: 6%;}
#aacp .contents-txt{margin-bottom: 2rem;}
#aacp .contents-tit span{display: inline-block; padding: 0 .5rem;}
#aacp .contents-tit strong{display: block;font-size: 115%; font-weight: bold;}
#aacp .contents-tit--box{position: relative;}
#aacp .contents-tit--icon{width: 23%; position: absolute; top: 1rem; right: -2%;}
#aacp .contents-tit.bg-img{
	margin-left: -6%; line-height: 1.4;
	padding: 4% 14% 4% 4%; width: 96%;
	text-align: left;
	border-radius: 0 80px 80px 0;
	background-image: url(https://www.dadway-onlineshop.com/freepage/ADE/img/photoevents/tit-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--white);
}
#aacp .contents-subtit{
	border-top: 4px dotted var(--white);
	border-bottom: 4px dotted var(--white);
	padding: 1rem 0; 
}

#aacp .contents.main {text-align: center; padding-top: 20%;}
#aacp .contents.main .main-tit > span {font-size: 95%; display: block; margin-bottom: 1rem;}
#aacp .contents.main .main-img {padding: 0 0 10%;}
#aacp .contents.main img[src*="logo-studiocaratt-g"]{max-width: 150px; margin: 0 auto; display: block;}

#aacp .zoomin.is-animated {animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#aacp .contents.main img[src*="logo-aa"]{max-width: 300px; margin: 0 auto; display: block;}
#aacp .contents.main img[src*="main-img1"]{margin: 10% auto 0 0; transform: rotate(-5deg);width: 80%; animation-delay: 600ms;}
#aacp .contents.main img[src*="main-img2"]{margin: -30% 0 0 auto; transform: rotate(10deg);width: 40%; animation-delay: 800ms;}
#aacp .contents.main .main-txt{background-color: var(--white); margin-bottom: 10%;}

#aacp .contents.index{text-align: center; background-color: var(--green); color: var(--white);}
#aacp .contents-index--box{border:1px solid var(--white); padding: 2%; margin-bottom: 3rem;}
#aacp .contents-index--list{display: flex; justify-content: center; align-items: center; list-style: none;}
#aacp .contents-index--list li{width: 20%; margin: 0 2%;}

/* 回転アニメーションの定義 */
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 回転する要素のスタイル */
.rotate-box,
.norotate-box{
  display: block;
  width: 20%; margin: 0 2%;
  cursor: pointer;
  transition: transform 1s ease-in-out;
}
.rotate-box:hover {	animation: rotateAnimation 1s ease-in-out forwards;}

#aacp #photoevent.contents {background-color: var(--lightmint);}
.fukidashi {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  width: 100%;
	color: var(--green);
  background: var(--white);
  border: solid 1px var(--green);
  box-sizing: border-box;
	border-radius: 4rem;
}
.fukidashi:before {
  content: "";
  position: absolute;
  top: -16px;
  left: 10%;
  margin-left: -15px;
  border: 8px solid transparent;
  border-bottom: 8px solid var(--white);
  z-index: 2;
}
.fukidashi:after {
  content: "";
  position: absolute;
  top: -20px;
  left: 10%;
  margin-left: -17px;
  border: 10px solid transparent;
  border-bottom: 10px solid var(--green);
  z-index: 1;
}
.fukidashi p {
  margin: 0;
  padding: 0;
}

#aacp .event-info,
#aacp .present-list{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem; margin-bottom: 2rem;
}
#aacp .event-info--tag{
	text-align: center;
	width: 4.4rem; padding: 1rem;
	line-height: 1.3;
    height: 100%;
    border-radius: .5rem;
	color: var(--white);
	background-color: var(--mint);
}
#aacp .event-info--list li{
	border-bottom: 1px solid var(--mint);
	padding: 1rem;
	color: var(--gray);
}
#aacp .event-info--list li strong{
	display: block; font-weight: bold;
}
#aacp .event-info--list li strong:before{
	content: '●';
	color:var(--mint);
}

#aacp .present-list{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem; margin-bottom: 2rem;
	place-items: center;
}
#aacp .present-list dt{
	text-align: center;
	width: 12rem; padding: 1rem;
    border-radius: .5rem;
	font-weight: bold;
	background-color: var(--white);
	font-size: 1.2rem;
}
#aacp .present-list dd{
	width: 100%;
	padding: 1rem; font-weight: bold;
}
#aacp #photospot.contents {background-color: var(--white);}
#aacp #photospot .campaign-info{
	position: relative;
	display: flex; justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 20px; padding: 4%;
	background-color: var(--yellow);
	gap: 6%;
}
#aacp #photospot .campaign-img {width: 33%;}
#aacp #photospot .campaign-txt {width: calc(100% - 39%);}
#aacp #photospot .campaign-info .btn {width: 100%; margin: 0 auto;}
#aacp #photospot .campaign-info .contents-tit--icon {width: 18%;top: 2%; right: 2%;}

#aacp #shopping.contents {background-color: var(--mint);}

#aacp #special.contents {background-color: var(--yellow);}
#aacp #special.contents img[src*="tit-special"]{max-width: 20%; margin: 15% auto 1.5rem; display: block;}
#aacp #special.contents .contents-subtit{
	background-color: var(--white);
	border-top: 4px dotted var(--mint);
	border-bottom: 4px dotted var(--mint);
	padding: 1rem .5rem;
}
#aacp .present-info{
	display: flex; justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 20px; 
	gap: 6%;
}
#aacp .present-img {width: 33%;}
#aacp .present-txt {width: calc(100% - 39%);}

#aacp #studio.contents{background-color: var(--bgyellow);}
#aacp #studio.contents img[src*="logo-studiocaratt-bk"]{max-width: 60%; margin: 0 auto 6%; display: block;}
#aacp #studio.contents .contents-txt{color: var(--gray); font-size: 90%;}




@media screen and (max-width: 1000px) {
#aacp .fixed-container{display: none;}
}