@charset "utf-8";

/*------------------------------------------------------------------------------

  DAITOMO WebView - 2025 - Terms

------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------

  common

------------------------------------------------------------------------------*/
html,
body {
  color: #333;
}

html {
  position: relative;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* ---- link ---------------------------------------- */
a {
  color: #ec7aac;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

a:hover {
  opacity: 0.5;
}




/*------------------------------------------------------------------------------

  object - project

------------------------------------------------------------------------------*/
/* ---- common ---------------------------------------- */
.wv-header {
  text-align: center;
  font-size: 1.25rem;
  padding: 1rem 0.5rem 0;
}

/* ---- accordion ---------------------------------------- */
.accordion {
  padding: 1rem;
  margin: 0 auto;
}

/* base */
.toggle {
	display: none;
}

.Label {		/*タイトル*/
	padding: .75rem 3rem .75rem 1rem;
	display: block;
	color: #fff;
	background:#ec7aac;
  border-radius: 10px;
}

.Label::before{		/*タイトル横の矢印*/
	content:url('../images/arrow.png');
	width: 20px;
	height: 20px;
	/* border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg); */
	position: absolute;
	top:calc( 50% - 10px );
	right: 20px;
	/* transform: rotate(135deg); */
}

.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s ease;
}

.content {		/*本文*/
	height: 0;
	margin-bottom: 1rem;
	overflow: hidden;
}

.content .inner {
  padding: 1rem;
  border: solid 1px #e0e0e0;
  border-radius: 10px;
}

.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding-top: 10px ;
	transition: all .3s;
}

.toggle:checked + .Label::before {
	transform: rotate(90deg) !important;
  transition: all .3s;
}

/* ---- terms ---------------------------------------- */
.terms {
  padding: 1rem;
}

.lead {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.terms section:not(:last-child) {
  margin-bottom: 2rem;
}

.terms h2 {
  font-size: 1.25rem;
  background-color: #ec7aac;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.terms h3 {
  font-size: 1rem;
  color: #ec7aac;
  border-bottom: double 3px #e0e0e0;
}

.terms h2,
.terms h3 {
  margin-bottom: 1rem;
}

.chapter-lead {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.main-text {
  font-size: 0.75rem;
}

.terms section ol,
.terms section ul {
  font-size: 0.75rem;
  padding-left: 1.25rem;
}

.terms section li:not(:last-child) {
  margin-bottom: 0.5rem;
}

.secondary-list {
  list-style-type:lower-roman;
  padding-top: 0.5rem;
}

.tertiary-list {
  padding-top: 0.5rem;
}






/*------------------------------------------------------------------------------

  object - utility

------------------------------------------------------------------------------*/
/* ---- button ---------------------------------------- */
/* button 基本構成 */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border: none;
  color: #fff;
  font-weight: bold;
  transition: all .3s;
}

/* button hover */
.btn:hover {
  opacity: 0.65;
  /* background-color: #1579c0; */
}

/* button 形状 */
.btn-square {
  border-radius: 5px;
}

.btn-round {
  border-radius: 100px;
}

/* button bg-color */
.btn-blue {
  background-color: #2589d0;
}

.btn-gray {
  background-color: #ccc;
}

.btn-green {
  background-color: #48ad92;
}

.btn-red {
  background-color: #c00;
}

.btn-white {
  background-color: #fff;
  color: #333 !important;
  border: solid 1px #cfcfcf;
}

/* button サイズ */
.btn-small {
  width: 120px;
  padding: .4rem 1rem;
  font-size: 0.75rem;
}

.btn-medium {
  width: 180px;
  padding: .75rem 1.5rem;
  font-size: 0.875rem;
}

.btn-large {
  width: 240px;
  padding: .9rem 2rem;
  font-size: 1rem;
}

.btn-tab {
  width: 160px;
  padding: .75rem 1.5rem;
  font-size: 0.875rem;
}

.btn-customer-tab {
  padding: .75rem 1.15rem;
  font-size: 0.75rem;
}

.btn-graph {
  width: 120px;
  height: 40px;
  padding: 0 1rem;
  font-size: 0.875rem;
}

.btn-detail {
  width: auto;
  color: #2589d0;
  background-color: #fff;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

.btn-normal {
  padding: .4rem 1rem;
  font-size: 0.75rem;
}










/* ---- margin ---------------------------------------- */
.mb08 {
  margin-bottom: 8px;
}

.mb16 {
  margin-bottom: 16px;
}

.mb24 {
  margin-bottom: 24px;
}

.mb32 {
  margin-bottom: 32px;
}

.mb48 {
  margin-bottom: 48px;
}

.mb64 {
  margin-bottom: 64px;
}

.mb80 {
  margin-bottom: 80px;
}

.mr08 {
  margin-right: 8px;
}

.mr16 {
  margin-right: 16px;
}

.mr24 {
  margin-right: 24px;
}

.mr32 {
  margin-right: 32px;
}

.margin-auto {
  margin: 0 auto;
}

.ml-auto {
  margin-left: auto;
}

.ml08 {
  margin-left: 8px;
}

.ml16 {
  margin-left: 16px;
}

.ml24 {
  margin-left: 24px;
}

.ml32 {
  margin-left: 32px;
}

.ml48 {
  margin-left: 48px;
}

.ml120 {
  margin-left: 120px;
}

.mlr08 {
  margin-left: 8px;
}



/* ---- padding ---------------------------------------- */
.pd08 {
  padding: 8px;
}

.pd16 {
  padding: 16px;
}

.pd24 {
  padding: 24px;
}

.pd32 {
  padding: 32px;
}

.pt32 {
  padding-top: 32px;
}


/* ---- on / off ---------------------------------------- */
.on {
  display: none;
}

.off {
  display: block;
}

@media (min-width: 768px) {

  .on {
    display: block;
  }

  .off {
    display: none;
  }

}


/* ---- google map responsive ---------------------------------------- */
.g-map {
  position: relative;
  padding-top: 56.25%;
  /* or 75%;(4:3) */
  height: 0;
  overflow: hidden;
}

.g-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---- youtube responsive ---------------------------------------- */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}





/*------------------------------------------------------------------------------

  layout

------------------------------------------------------------------------------*/
/* ---- grid ---------------------------------------- */
.grid-1col {
  display: grid;
  grid-template-rows: 560px;
  grid-template-columns: 1fr;
}

.grid-2col {
  display: grid;
  grid-template-rows: 560px;
  grid-template-columns: 1fr 240px;
}


/* ---- flex ---------------------------------------- */
.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-item-end {
  align-items: end;
}