@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;}

a {text-decoration:none;}
a:focus,*:focus {outline:none;}
html {width: 100%; font-size: 62.5%;}
* {box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body {width:100%;}
.pane-topic-path a{ display: inline-block;}


/* base */
:root {
	--white:     #ffffff;
	--dwblue:    #009CDE;
	--blue:      #A3DCF3;
	--lightblue: #E0F6FF;
	--lightgray: #cccccc;
	--bggray:    #F9F9F9;
	--darkgray:  #535353;
	--green:     #64aca6;
	--pink:      #ED8F94;
	--beige:     #C7AB6B;
}
#column .sp { display: block;}
#column .pc { display: none;}

#column {
	width: 100%;
	font-family: 'Noto Sans', sans-serif !important;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.15rem;
	color: var(--darkgray);
	font-feature-settings: "palt";
	padding: 0;
	text-align: left;
	padding:5% 0;
}
#column blockquote{
	background-color: #fafbfc;
    border: 1px solid #ccc;
    margin: 0;
    padding: 8% 1.2em 2%;
    position: relative;
}
#column blockquote::before {
    content: "“";
    line-height: 1.1;
    left: 2%;
    top: 1%;
}
blockquote::after {
    content: "”";
    line-height: 0;
    right: 2%;
    bottom: 1%;
}
blockquote::before,
blockquote::after {
    color: #C8C8C8;
    font-family: serif;
    position: absolute;
    font-size: 200%;
}
#column strong{font-weight: bold !important;}
#column img {width:100%;display:block;}
#column .img-L{float: left; display: inline-block; margin-right: 20px;}
#column .img-R{float: right; display: inline-block; margin-left: 10px;}
#column .img-C{display: block; margin: 0 auto;}
#column .marker{background-color: var(--lightblue);}
#column a {
	color: var(--dwblue);
}
#column a:hover {
	text-decoration:none;
	opacity: .8;
}
#column a.txt-link {
	color: var(--darkgray);
	text-decoration: underline;
}
#column .page-link {
	color: var(--darkgray);
	text-decoration: underline;
	text-align: right;
	font-size: 12px;
	margin-right: 4%;
}
#column .page-link a{
    position: relative;
    display: inline-block;
    padding: 0 16px 0 0;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
}
#column .page-link a::after{
    position: absolute;
    top: 0;
    bottom: 0;
	right: 3px;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--darkgray);
    border-right: 1px solid var(--darkgray);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#column .column-tit {
	position: relative;
	width: 90%; margin: 0 auto 5%;
	padding: 0;
	font-size: 12px;
	text-align: left;
	color: var(--blue);
	border-bottom: none !important;
}
#column .column-tit:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: var(--lightblue);
}
#column .column-tit span {
  position: relative;
  padding: 0 1em 0 0;
  background: var(--white);
}
#column.coffret .column-tit {color: var(--green);}
#column.coffret .column-tit:before {
	background: var(--green);
	height: 1px;
}
#column .note {
	font-size: 12px;
}
#column .copyright{font-size: 12px; text-align: right;}
#column [class*="btn"] {
    display: block;
    text-align: center;
    font-weight: bold;
    color: var(--darkgray);
    padding: 13px;
    margin: 0 auto;
    background: var(--white);
    width: 85%;
    font-size: 14px;
	border: 1px solid var(--darkgray);
	border-radius: 40px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#column .img-L40S50{width: 50%;}
#column .flex {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
#column .flex .flex-box{width: 49%;}
#column .flex .flex-box:nth-child(odd){margin-right: 2%;}

				@media screen and (min-width: 1200px){
					#column .sp { display: none;}
					#column .pc { display: block;}
					#column {font-size: 16px;}
					#column a:hover {opacity: 0.7; transition: all 0.3s ease 0s;}
					#column .page-link {margin-right: 0;}
					#column .column-tit {
						width: 100%; margin: 0 auto 5%;
						font-size: 14px; font-weight: bold;
					}
					#column .img-10{width: 10%;}
					#column .img-20{width: 20%;}
					#column .img-30{width: 30%;}
					#column .img-40{width: 40%;}
					#column .img-50{width: 50%;}
					#column .img-L40S50{width: 40%;}
					#column .img-R{margin-left: 20px;}
				}



/* main */
#column .contents{
	width: 90%; margin: 0 auto 5%;
	overflow: hidden; clear: both;
}
#column .contents .contents-tit{
	font-size: 22px;
	margin-bottom: 3rem;
	text-align: left;
	border-bottom: none;
}
#column .contents .contents-tit.synapusyu-tit{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#column .contents .contents-tit.synapusyu-tit span{
	display: block;
	font-size: 12px; color: var(--blue);
	width: 4em; text-align: right;
}
#column .contents .contents-subtit{
	font-size: 18px;
	margin-bottom: 3rem;
	text-align: left;
	font-weight: bold;
	color: var(--darkgray);
}
#column .contents .contents-subhead{
	font-size: 16px;
	padding-top: 1rem;
	margin-bottom: 1.5rem;
	text-align: left;
	font-weight: bold;
	color: var(--darkgray);
}
#column .contents .contents-faq{
	background-color: var(--bggray);
	padding: 4%; border-radius: 20px;
	margin-bottom: 5%;
}
#column .contents .contents-subhead.faq-Q{
	background: url(https://www.dadway-onlineshop.com/freepage/faq/img/q.png) left 3px no-repeat;
    background-size: 20px;
    padding: 0 32px;
}
#column .contents .contents-txt.faq-A{
	background: url(https://www.dadway-onlineshop.com/freepage/faq/img/a.png) left 3px no-repeat;
    background-size: 20px;
    padding: 0 0 0 32px;
}

#column .contents .contents-img,
#column .contents .contents-txt,
#column .contents .caption{
	margin-bottom: 1.5rem;
}
#column .contents .contents-img-cap{
	margin-bottom: 1rem;
}
#column .contents .contents-sec{
	margin-bottom:15%;
}
#column .contents .caption{
	text-align: right;
	font-size: 10px;
}
#column .contents .contents-list,
#column .contents .contents-checklist{
	margin-left: 1.5rem;
	margin-bottom: 1.5rem;
}
#column .contents .contents-list li{list-style: circle;}
#column .contents .contents-checklist li{
    position: relative;
    padding-left: 25px;
  }
#column .contents .contents-checklist li:before {
    content: "";
    position: absolute;
    top: .35em;
    left: 6px;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 4px;
    height: 9px;
    border-right: 2px solid var(--dwblue);
    border-bottom: 2px solid var(--dwblue);
  }
#column .contents .contents-checklist li:after {
    content: "";
    position: absolute;
    top: .2em;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid var(--dwblue);
    border-radius: 2px;
  }
#column .contents .contents-table {
	table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
	margin-bottom: 1.5rem;
}
#column .contents .contents-table th {
    border: 2px solid #fff;
    padding: 1% 2%;
    background-color: var(--lightblue);
    vertical-align: middle;
    color: var(--dwblue);
	font-size: 12px; 
}
#column .contents .contents-table td {
    border: 2px solid #fff;
    padding: 2% 2%;
    background-color: var(--bggray);
    vertical-align: middle;
	overflow-wrap: break-word;
}
#column .contents .label{
	display: inline-block; border-radius: 4px;
	text-align: center; margin-right: 1rem;
	color: var(--white); padding: .25rem .5rem;
	font-size: 12px; font-weight: bold;
}
#column .contents .bg-pink{background-color: var(--pink);}
#column .contents .bg-beige{background-color: var(--beige);}
				@media screen and (min-width: 1200px){
					#column .contents{width: 100%; max-width: 800px;}
					#column .contents .contents-tit {font-size: 28px;}
					#column .contents .contents-tit.synapusyu-tit span{font-size: 14px;}
					#column .contents .contents-subtit{font-size: 24px;}
					#column .contents .contents-subhead{font-size: 18px;}
					#column .contents .contents-sec {margin-bottom:10%;}
				}



/* item */
#column .contents-box-wrap{
	width: 100%; margin: 0 auto 30px;
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-content: flex-start;
}
#column .contents-box-wrap .item-box{
	position: relative;
	width: calc(100%/2); padding: 4%;
}
#column .contents-box-wrap .item-box a{
	position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}
#column .contents-box-wrap .item-box a:hover {
	opacity: .8;
}
#column .contents-item .item-img{
	margin-bottom: 5%;
}
#column .contents-item .item-info{
	border-top: 1px dotted var(--lightgray);
	padding: 5% 0;
	font-weight: bold;
}
#column .contents-item .item-brand{
	font-size: 13px; margin-bottom: 1rem;
}
#column .contents-item .item-brand .jp{
	display: inline-block;
	margin-left: 1rem;
	font-size: 10px; color: var(--lightgray);
}
#column .contents-item .item-price .tax{
	font-weight: normal;
	font-size: 90%;
}
#column .contents-item .item-txt{
	display: inline-block;
	font-size: 12px; color: var(--darkgray);
}
#column .contents-box-wrap.contents-link {
	width: 90%; margin: 0 auto 10%;
	border: 2px solid var(--blue);
	border-radius: 20px; padding: 4%;
	justify-content: center; gap:20px 60px;
	flex-wrap: wrap;
}
#column .contents-link .contents-link-tit{
	width: 100%; text-align: center;
	color: var(--blue); 
	font-weight: bold; font-size: 16px;
}
#column .link-box{
	position: relative;
	width: 100%;
}
#column .link-box .link-box-link{
	position: absolute;
	width: 100%; height: 100%; display: block;
	top: 0;left: 0;
}
#column .link-box .link-box-link:hover:after{
	 border-color: var(--blue);
}
#column .link-box .link-box-link:after{
	content: "";
    position: absolute;
    display: inline-block;
    height: 10px;
    width: 10px;
    border-color: var(--darkgray);
    border-style: solid;
    border-width: 2px 2px 0 0;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -5px;
    right: 16px;
}
#column .link-box .link-box-link.instagram:after{border: none;}
#column .link-box--wrap{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap:20px; padding-right: 20px;
}
#column .link-box--img{width: 80px;}
#column .link-box--txt{width: calc(100% - 100px);}
#column .link-box--txt .link-box--name{font-size: 12px; display: block;}

#column .contents-ranking{
	display: flex;
	justify-content: space-between;
	align-items:flex-start;
	flex-wrap: wrap;
}
#column .contents-ranking .contents-ranking-img{
	width: 43%; margin-left: 2%; margin-bottom: 10%;
	
}
#column .contents-ranking .contents-ranking-txt{
	width: 55%; margin-bottom: 10%
}
#column .contents-ranking .contents-ranking-txt .btn{
	max-width: 200px; padding: .25rem 13px;
}
#column .contents-ranking .ranking-item-name{
	font-weight: bold; color: var(--dwblue);
	font-size: 14px; margin-bottom: 1rem;
}
#column .contents-ranking .ranking-no{
	 color: var(--white); padding: .25rem 1rem;
	background-color:var(--dwblue); border-radius: 5px;
	display: inline-block; margin: 0 1rem 0 0;
}
#column .contents-ranking .ranking-item-txt{
	margin-bottom: 1.5rem;
}
#column .contents-point{
	display: flex;
	justify-content: space-between;
	align-items:stretch;
	flex-wrap: wrap;
	margin-top: 15%;
}
#column .contents-point .contents-point-box{
	width: 100%;
	background-color: var(--lightblue);
	border-radius: 20px;
	padding: 4%;
	margin-bottom: 10%;
}
#column .contents-point .contents-point-box:last-child{margin-bottom: 0;}
#column .contents-point .contents-point-tit{
	position: relative;
	text-align: center;
	color: var(--dwblue);
	font-weight: bold;
	margin-bottom: 1.5rem;
}
#column .contents-point .contents-point-tit::before{
	content: attr(data-number);
	display: block; margin: -24px auto 1rem;
	width: 10em;
	margin-bottom: 1rem;
	color: var(--white);
	font-size: 14px;
	font-weight: bold;
	border-radius: 24px;
	background-color: var(--blue);
}
#column .contents-point .contents-point-img{margin-bottom: 1.5rem; border-radius: 30px;}
#column .contents-point .contents-point-txt{font-size: 13px;}
/* banner */
#column .bnr{width: 96%; margin: 0 auto;}
#column .bnr li{margin-bottom: 5%;}

				@media screen and (min-width: 1200px){
					#column .contents-box-wrap .item-box{width: calc(100%/4); padding: 2%;}
					#column .contents-item .item-img{margin-bottom: 0;}
					#column .contents-box-wrap.contents-link{width: 100%;padding: 2% 4%;margin-bottom: 5%;}
					#column .link-box{width: calc(100%/2 - 30px);}
					#column .contents-link .contents-link-tit{font-size: 20px;}
					#column .contents-ranking{align-items:center;}
					#column .contents-ranking .contents-ranking-img{margin-left: 2%; margin-bottom: 5%;}
					#column .contents-ranking .contents-ranking-txt{margin-bottom: 5%;}
					#column .contents-ranking .ranking-item-name{font-size: 16px;}
					#column .contents-ranking .ranking-no{margin: 0 1rem 0 0;}
					#column .contents-point{margin-top: 5%;}
					#column .contents-point .contents-point-box{
						width: calc(100% / 3 - 10px); 
						padding: 2%; margin-bottom: 0;
					}
					#column .bnr{
					width: 100%; margin: 0 auto 2.5%;
					display: flex;
					flex-wrap: wrap;
					}
					#column  .bnr li{
						width: 48%; margin: 0 1% 2.5%;
					}
					#column  .bnr.single{
						display: block; text-align: center;
						margin: 0 auto 10%;
					}
					#column  .bnr.single li{
						width: 48%; margin: 0 auto;
					}
				}