@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	File Name : support.css

 * :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ==================================================================
 *  サポートトップ
 * ================================================================== */
 #supportmenu > li {
 border: solid 1px #ECECEC;
 box-sizing: border-box;
 }

.supportmenu__icon { 
 text-align: center;
 }
.supportmenu__icon img {
 width: auto;
 height: auto;
 max-height: 90px;
 }
 #supportmenu h2 {
  position: relative;
  margin-top: 24px;
  font-weight: bold;
  padding-left: 28px;
 }
#supportmenu h2 a { color: #535353; text-decoration: none; }
#supportmenu h2 a:hover { text-decoration: underline; }

 #supportmenu h2 a:before {
  display: block;
  width: 18px;
  height: 18px;
  background-color: #535353;
  content: "";
  position: absolute;
  top:4px;
  left:0;
  z-index: 1;
 }

 #supportmenu h2 a:after {
  display: block;
  width: 6px;
  height: 6px;
  border-right: solid 2px #FFF;
  border-bottom: solid 2px #FFF;
  content: "";
  position: absolute;
  top:9px;
  left:4px;
  transform: rotate(-45deg);
  z-index: 2;
 }

.supportmenu__desc { background-color: #F7F7F7; font-size: .875em; }


.supportmenu__linklist { margin-top: 1em; }
.supportmenu__linklist li { margin-top: .5em; }
.supportmenu__linklist a { position: relative; display: block; padding-left: 20px; font-size: .875em; text-decoration: none; }
.supportmenu__linklist a:hover { text-decoration: underline; }
.supportmenu__linklist a:before {
  display: block;
  width: 6px;
  height: 6px;
  border-right: solid 2px #716f63;
  border-bottom: solid 2px #716f63;
  content: "";
  position: absolute;
  top:8px;
  left:0;
  transform: rotate(-45deg);
 }


div .newSupportLink { 
 	display: flex;
 	justify-content: flex-end;
 	margin-top: 2em;
 	padding-top: 1em;
}
/* border-top: dotted 1px #59574c; */
/*	margin-top: 30px;
	text-align: right; */

div .newSupportLink a { 
	position: relative; 
	display: block; 
	padding-left: 20px; 
	font-size: .875em; 
	text-decoration: none; 
}
div .newSupportLink a:hover { 
	text-decoration: underline; 
}

.arwlink {
 position: relative;
 padding-left: 20px;
 }
.arwlink:before {
 display: block;
 width: 6px;
 height: 6px;
 border-right: solid 2px #59574c;
 border-bottom: solid 2px #59574c;
 content: "";
 position: absolute;
 top:8px;
 left:0;
 transform: rotate(-45deg);
}



@media screen and (min-width: 769px){
#supportmenu {
 display: flex;
 justify-content: flex-start;	
 flex-wrap: wrap;
 margin-top: 20px;	
}
 #supportmenu > li {
  width: 23%;
  margin-right: 2.66%;
  margin-top: 24px;
  padding: 24px 2%;
 }
 #supportmenu > li:nth-child(4n) {
  margin-right: 0;
 }
 #supportmenu h2 { font-size: 1.1rem; }	
 .supportmenu__desc { margin-top: 1em; padding: 8px; }
}
@media screen and (max-width: 768px){
#supportmenu {
 margin-top: 20px;
 padding: 0 5%;
}
 #supportmenu > li {
  width: 100%;
  margin-top: 1em;
  padding: 2em 5%;
 }
 .supportmenu__desc { margin-top: 1em; padding: 8px; }	

}


.topics { margin-top: 80px; }

.topics h2 {
 color: #716F63;
 padding-left: .7em;
 border-left: 4px solid #716F63;
}

 .topics .topics__list > li:before { 
 position: absolute;
 left: 0;
 top:.75em;
 display: block;
 content: "";
 width: 1em;
 height:1em;
 border-radius : .5em;
 background-color: #59574c;
}


@media screen and (min-width: 769px){
 .topics h2 { font-size: 1.5rem; }
 .topics dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1.5em;
 }
 .topics dt { width: 12em; }
 .topics dd { width: calc(100% - 12em);  }
 .topics dt ,.topics dd { padding: 1em 0; border-bottom: solid 1px #ECECEC; }	

 .topics .topics__list { margin-top: 2em; }
 .topics .topics__list > li { margin-top: 1em; position: relative; padding: .5em 0 1em 1.5em; border-bottom: solid 1px #ECECEC; }
	
	
}
@media screen and (max-width: 768px){
 .topics h2 { font-size: 6vw; }	
 .topics dl { margin-top: 1em; }
 .topics dt , .topics dd { width: 100%; }
 .topics dt { margin-top: 2em; position: relative; padding-left: 1.5em; }
 .topics dt:before {
 content:"●";
 position: absolute;
 top:0;
 left:0;
 color: #59574c;
}	
 .topics dd { padding: .5em 0 1em; border-bottom: solid 1px #ECECEC; }	
	
 .topics .topics__list { margin-top: 2em; }
 .topics .topics__list > li { margin-top: 1em; position: relative; padding: .5em 0 1em 1.5em; border-bottom: solid 1px #ECECEC; }
}