@charset "utf-8";
/* CSS Document */
/*
======================================================================================================
※重要・コピーライト
======================================================================================================
Copyright 株式会社サインモール All Rights Reserved.
無断転用禁止
当ファイルの無断転用及び複製等の行為を固く禁じます。
*/

/*
======================================================================================================
初期化
======================================================================================================
*/
.Wrapper {
  max-width: 1000px;
  clear: both;
  margin: 0 auto;
}

@media screen and (max-width:1040px) {
  .Wrapper {
    width: 95%;
  }
}

.PT-Wrapper {
  max-width: 1000px;
  clear: both;
  padding: 0;
  margin: 0 auto;
}

.M60T {
  margin-top: 60px;
}

.P60T {
  padding-top: 60px;
}

.P60B {
  padding-bottom: 60px;
}

.M90T {
  margin-top: 90px;
}

.P90T {
  padding-top: 90px;
}

.P90B {
  padding-bottom: 90px;
}

.P120T {
  padding-top: 120px;
}


.heading {
  font-size: 180%;
  font-weight: normal;
  line-height: 1.4;
}

.heading2 {
  font-size: 150%;
  font-weight: normal;
  line-height: 1.4;
}

.heading3 {
  font-size: 140%;
  font-weight: normal;
  line-height: 1.4;
}

.lead {
  font-size: 130%;
  font-weight: normal;
  line-height: 1.5;
}

.SecTit {
  font-size: 220%;
  font-weight: normal;
}

.SecBiggerTit {
  font-size: 240%;
  font-weight: normal;
}

.SecBiggestTit {
  font-size: 280%;
  font-weight: normal;
}

.SecSubTit {
  font-size: 180%;
  font-weight: normal;
}

.SecSub2Tit {
  font-size: 160%;
  font-weight: normal;
}

.SecSub3Tit {
  font-size: 140%;
  font-weight: normal;
}

@media screen and (max-width: 768px) {
  .SecTit {
    font-size: 160%;
  }

  .SecSub2Tit {
    font-size: 145%;
  }

  .SecSub3Tit {
    font-size: 130%;
  }
}

.StatPasB {
  background-color: #2ec3ee;
}

.StatPasP {
  background-color: #fb8f9f;
}

.StatPasG {
  background-color: #20d0ac;
}

.StatPasY {
  background-color: #fbf04b;
}

.StatNavy {
  background-color: #002447;
}

/*===================
PC4/SP2
====================*/
.P4S2UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.P4S2UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.P4S2UL>li {
  width: 22%;
  margin: 1.5%;
}

.P4S2UL.P>li {
  padding: 10px;
}

.P4S2UL.BGNone>li {
  background: none;
}

@media screen and (max-width: 768px) {
  .P4S2UL>li {
    width: 47%;
    margin: 1.5%;
    text-align: center;
  }
}

/*===================
PC3/SP2
====================*/
.P3S2UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.P3S2UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.P3S2UL>li {
  width: 30.3%;
  margin: 1.5%;
}

.P3S2UL.P>li {
  padding: 10px;
}

.P3S2UL.BGNone>li {
  background: none;
}

@media screen and (max-width: 768px) {
  .P3S2UL>li {
    width: 47%;
    margin: 1.5%;
    text-align: center;
  }
}

/*===================
PC5/SP2
====================*/
.P5S2UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.P5S2UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.P5S2UL>li {
  width: 18%;
  margin: 1%;
}

.P5S2UL.P>li {
  padding: 10px;
}

.P5S2UL.BGNone>li {
  background: none;
}

@media screen and (max-width: 768px) {
  .P5S2UL>li {
    width: 47%;
    margin: 1.5%;
    text-align: center;
  }
}

/*===================
PC5/SP3
====================*/
.P5S3UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.P5S3UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.P5S3UL>li {
  width: 18%;
  margin: 1%;
}

.P5S3UL.P>li {
  padding: 10px;
}

.P5S3UL.BGNone>li {
  background: none;
}

@media screen and (max-width: 768px) {
  .P5S3UL>li {
    width: 31.3%;
    margin: 1%;
    text-align: center;
  }
}


/*===================
PC6/SP3
====================*/
.P6S3UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.P6S3UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.P6S3UL>li {
  width: 14.6%;
  margin: 1%;
}

.P6S3UL.P>li {
  padding: 10px;
}

.P6S3UL.BGNone>li {
  background: none;
}

@media screen and (max-width: 768px) {
  .P6S3UL>li {
    width: 31.3%;
    margin: 1%;
    text-align: center;
  }
}


/*===================
PC2/SP1
====================*/
.P2S1UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.P2S1UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.P2S1UL>li {
  width: 50%;
}

.P2S1UL.P>li {
  padding: 10px;
}

.P2S1UL.BGNone>li {
  background: none;
}

@media screen and (max-width: 768px) {
  .P2S1UL>li {
    width: 100%;
  }
}

/*===================
PC2/SP1(Margin付き)
====================*/
.P2S1ULM {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.P2S1ULM>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.P2S1ULM>li {
  width: 48%;
  margin: 1%;
}

.P2S1ULM.P>li {
  padding: 10px;
}

.P2S1ULM.BGNone>li {
  background: none;
}

@media screen and (max-width: 768px) {
  .P2S1ULM>li {
    width: 100%;
  }
}

/*===================
PCSP2
====================*/
.PCSP2UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.PCSP2UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.PCSP2UL>li {
  width: 48%;
  margin: 1%;
}

.PCSP2UL.M0>li {
  width: 50%;
  margin: 0;
}

.PCSP2UL.P>li {
  padding: 10px;
}

.PCSP2UL.BGNone>li {
  background: none;
}



/*===================
PCSP3
====================*/
.PCSP3UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.PCSP3UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.PCSP3UL>li {
  width: 31.3%;
  margin: 1%;
}

.PCSP3UL.M0>li {
  width: 33.3%;
  margin: 0;
}

.PCSP3UL.P>li {
  padding: 5px;
}

.PCSP3UL.BGNone>li {
  background: none;
}

/*===================
PCSP4
====================*/
.PCSP4UL {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.PCSP4UL>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  background-color: #fff;
}

.PCSP4UL>li {
  width: 23%;
  margin: 1%;
}

.PCSP4UL.P>li {
  padding: 5px;
}

.PCSP4UL.BGNone>li {
  background: none;
}

/*===================
CL-Steps
====================*/
.CL-Steps {
  position: relative;
}

.CL-Steps-CntLine {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 20px;
  margin-left: 0;
  background: #2489ce;
  z-index: -1;
}

.CL-Steps-article {
  position: relative;
  margin: 0 0 70px 0;
  /*Step同時のMargin*/
}

.CL-Steps-content {
  margin-left: 60px;
}

.CL-Step-No {
  position: absolute;
  top: 0;
  left: 0px;
  width: 40px;
  height: 40px;
  margin-left: 0;
  color: #003399;
  border-radius: 100%;
  background: #fff;
  display: block;
  text-align: center;
  border: solid 1px #2489ce;
}

.CL-Step-No>.no {
  padding-top: 6px;
  font-size: 24px;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}


/*===================
SpecTbl
.CL-STbl.dtCntでdtセンター揃え
.CL-STbl.M0でマージン0px
====================*/
.CL-STbl {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-top: none;
}

.CL-STbl dt {
  padding: 10px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
}

.CL-STbl.dtCnt dt {
  text-align: center;
}

.CL-STbl dd {
  padding: 10px;
  margin: 0;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
}

.CL-STbl dd.P0 {
  padding: 0px;
}

.CL-STbl.G3-7 dt {
  width: 30%;
}

.CL-STbl.G3-7 dd {
  width: 70%;
}

.CL-STbl.G4-6 dt {
  width: 40%;
}

.CL-STbl.G4-6 dd {
  width: 60%;
}

.CL-STbl.G5-5 dt,
.CL-STbl.G5-5 dd {
  width: 50%;
}

.CL-STbl.G7-3 dt {
  width: 70%;
}

.CL-STbl.G7-3 dd {
  width: 30%;
}

@media screen and (max-width: 768px) {
  .CL-STbl.G3-7 dt {
    width: 40%;
  }

  .CL-STbl.G3-7 dd {
    width: 60%;
  }

  .CL-STbl.G4-6 dt,
  .CL-STbl.G4-6 dd,
  .CL-STbl.G5-5 dt,
  .CL-STbl.G5-5 dd {
    width: 50%;
  }

  .CL-STbl.G7-3 dt {
    width: 70%;
  }

  .CL-STbl.G7-3 dd {
    width: 30%;
  }

  .CL-STbl.SP1 {
    flex-flow: column nowrap;
  }

  .CL-STbl.SP1 dt,
  .CL-STbl.SP1 dd {
    width: 100%;
  }

  .CL-STbl.SP1.G3-7 dt,
  .CL-STbl.SP1.G3-7 dd,
  .CL-STbl.SP1.G4-6 dt,
  .CL-STbl.SP1.G4-6 dd,
  .CL-STbl.SP1.G5-5 dt,
  .CL-STbl.SP1.G5-5 dd,
  .CL-STbl.SP1.G7-3 dt,
  .CL-STbl.SP1.G7-3 dd {
    width: 100%;
  }

  .CL-STbl.SP1 dd {
    border-left: none;
  }
}



/*===================
横スクロールテーブル
====================*/
.ScrollTbl {
  overflow: auto;
}

.ScrollTbl table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;

}

.ScrollTbl table th {
  font-weight: normal;
}

.ScrollTbl table th,
.ScrollTbl table td {
  border-bottom: solid 1px #ccc;
  padding: 5px;
  text-align: center;

}

.ScrollTbl table td,
.ScrollTbl table th {
  border-left: solid 1px #ccc;
}

.ScrollTbl::-webkit-scrollbar {
  height: 0.8em;
}

.ScrollTbl::-webkit-scrollbar-track {
  background: #F1F1F1;
}

.ScrollTbl::-webkit-scrollbar-thumb {
  background-color: #008ffd;
  border-radius: 12px;
  border-radius: 1.2rem;
}

.ScrollTbl td,
.ScrollTbl th {
  white-space: nowrap;
}

.ScrollTbl::-webkit-scrollbar-thumb:hover {
  background-color: #37a8ff;
}

@media screen and (max-width: 768px) {
  .ScrollTbl table {
    border-right: none;
  }
}





/*===================
デザインラベル
====================*/
.CL-Lbl {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 40px;
  height: 40px;
  margin-left: 0;
  border-radius: 100%;
  display: block;
  text-align: center;
  z-index: 80;
}

.CL-Lbl-Icon {
  padding-top: 7px;
  font-size: 24px;
  display: block;
  margin-left: 2px;
  z-index: 81;
}

/*===================
写真用01,02,,デザインラベル
====================*/
.CL-DL {
  z-index: 2;
  position: relative;
}

.CL-DL:after {
  position: absolute;
  content: " ";
  height: 0;
  width: 0;
}

.CL-DL span.CL-DL-Tag {
  position: absolute;
  content: " ";
  font-size: 16px;
  color: #ffffff;
  z-index: 2;
  font-family: Arial, Helvetica, sans-serif;
}

.CL-DL:after {
  top: 0;
  left: 0;
  border-bottom: 3em solid transparent;
  border-left: 3em solid #075bb0;
}

.CL-DL span.CL-DL-Tag {
  top: .5em;
  left: .3em;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

/*===================
斜め背景
====================*/
.CL-DStat {
  -webkit-transform: skew(0deg, -5deg);
  -moz-transform: skew(0deg, -5deg);
  transform: skew(0deg, -5deg);
  padding-top: 60px;
  padding-bottom: 100px;
}

.CL-DStat>section {
  -webkit-transform: skew(0deg, 5deg);
  -moz-transform: skew(0deg, 5deg);
  transform: skew(0deg, 5deg);
}





.CL-WallPBG {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  transform: skew(0, 5deg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 50px 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CL-WallPCont {
  transform: skew(0, -5deg);
  height: 500px;
  width: 100%;
  overflow: hidden;
  position: relative;

}

.CL-WallPWrap {
  padding: 50px 0;
}

@media screen and (max-width: 768px) {
  .CL-WallPBG {
    background-size: 100%;
    padding: 0;
    transform: none;
    position: static
  }

  .CL-WallPCont {
    height: 200px;
    transform: none;
    position: static;
  }

  .CL-WallPWrap {
    padding: 0;
  }
}



/*===================
プラスマイナスToggle
（背景追加NGです）
====================*/
.CL-Toggle>a {
  display: block;
  position: relative;
  color: #0055a6;
  padding-right: 40px;
  padding-top: 3px;
}

.CL-Toggle>a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 20px;
  height: 2px;
  background: #0055a6;
  transform: translateY(-50%);
}

.CL-Toggle>a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 2px;
  height: 20px;
  background: #0055a6;
  transform: translateY(-50%);
  transition: .3s;
}

.CL-Toggle>a.Active {
  border-bottom: none;
}

.CL-Toggle>a.Active:after {
  top: 25%;
  opacity: 0;
  transform: rotate(90deg);
}

@media screen and (max-width: 768px) {
  .CL-Toggle>a {
    font-size: 100%;
  }
}


/*===================
よくある質問 プラスマイナスToggle
====================*/
.CL-PMList>a {
  display: block;
  position: relative;
  /* 追加 */
  background-color: #fff;
  color: #0055a6;
  border-bottom: solid 1px #ccc;
  font-size: 120%;
  line-height: 120%;
  padding: 20px 20px 20px 10px;
}

.CL-PMList>a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 24px;
  height: 2px;
  background: #0055a6;
  transform: translateY(-50%);
}

.CL-PMList>a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 19px;
  width: 2px;
  height: 24px;
  background: #0055a6;
  transform: translateY(-50%);
  transition: .3s;
}

.CL-PMList>a.Active {
  border-bottom: none;
}

.CL-PMList>a.Active:after {
  top: 25%;
  opacity: 0;
  transform: rotate(90deg);
}

.CL-PMListAns {
  display: none;
  padding: 15px;
  border-bottom: solid 1px #ccc;
  position: relative;
  background: #eff9fd;
  border-bottom: 1px solid #ccc;
  font-size: 120%;
}

.CL-PMListAns:after,
.CL-PMListAns:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.CL-PMListAns:after {
  border-width: 4px;
  left: 4%;
  margin-left: -4px;
  border-bottom-color: #eff9fd;
}

.CL-PMListAns:before {
  border-width: 12px;
  left: 4%;
  margin-left: -12px;
  border-bottom-color: #eff9fd;
}

@media screen and (max-width: 768px) {

  .CL-PMList>a,
  .CL-PMListAns {
    font-size: 100%;
  }
}





/*===================
(A)Lstメイン掲載アイテム
====================*/
.ListItemParent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid #ccc;
}

.ListItem {
  width: 25%;
  list-style: none;
  background: #FFF;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  box-sizing: border-box;
  padding-bottom: 10px;
}

@media screen and (max-width: 1000px) {
  .ListItem {
    width: 33.33%;
  }
}

@media screen and (max-width: 800px) {
  .ListItem {
    width: 50%;
  }

  .ListItem img {
    max-width: 100%;
    height: auto;
  }
}

/*===================
 (C)大量掲載モードアイテム
 ====================*/
.MultiItemParent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid #ccc;

}

.MultiItem {
  width: 12.5%;
  list-style: none;
  background: #FFF;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  box-sizing: border-box;
  padding-bottom: 10px;
}

@media screen and (max-width: 900px) {
  .MultiItem {
    width: 14.2%;
  }
}

@media screen and (max-width: 800px) {
  .MultiItem {
    width: 16.6%;
  }
}

@media screen and (max-width: 700px) {
  .MultiItem {
    width: 20%;
  }
}

@media screen and (max-width: 600px) {
  .MultiItem {
    width: 25%;
  }
}

@media screen and (max-width: 500px) {
  .MultiItem {
    width: 33.33%;
  }
}





/*===================
SVG Icons
====================*/
.CL-SVG {
  background-repeat: no-repeat;
}

.SVG-NG {
  background-image: url('/common/css/commondesign/image/ng.svg');
}

.SVG-Attention {
  background-image: url('/common/css/commondesign/image/attention.svg');
}

.SVG-CheckG {
  background-image: url('/common/css/commondesign/image/check_green.svg');
}

.SVG-CheckB {
  background-image: url('/common/css/commondesign/image/check_blue.svg');
}

.SVG-InfoG {
  background-image: url('/common/css/commondesign/image/info_green.svg');
}

.SVG-InfoB {
  background-image: url('/common/css/commondesign/image/info_blue.svg');
}

.SVG-PosS {
  background-size: 30px;
  padding-left: 40px;
  min-height: 36px;
  padding-top: 6px;
  background-position: 3px 3px;
}

.SVG-PosL {
  background-size: 45px;
  padding-left: 55px;
  min-height: 55px;
  padding-top: 3px;
  background-position: 0px 3px;
}

.SVG-PosS.P0T {
  padding-top: 0px;
}

.SVG-PosL.P0T {
  padding-top: 0px;
}


/*===================
ヘッダー固定ナビゲーション
====================*/
#CL-MainNavi {
  z-index: 999;
  width: 100%;
}

#CL-MainNavi.NaviFixed {
  left: 0;
  position: fixed;
  top: 0;
}

.CL-MainNaviScroll {
  text-align: center;
  border-bottom: solid 1px #CCC;
  width: 100%;

}

.CL-MainNaviScroll>ul {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 8px;

}

.CL-MainNaviScroll>ul>li {
  display: table-cell;
  width: 50%;
  background-color: #fff;
}

.CL-MainNaviScroll>ul>li>a {
  display: block;
}

@media screen and (max-width:1000px) {
  .CL-MainNaviScroll>ul>li {
    display: table-cell;
    width: 100px;
  }

  .CL-MainNaviScroll {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .CL-MainNaviScroll::-webkit-scrollbar {
    height: 0.2em;
  }

  .CL-MainNaviScroll:hover::-webkit-scrollbar {
    height: 0.9em;
  }

  .CL-MainNaviScroll::-webkit-scrollbar-track {
    background: #F1F1F1;
  }

  .CL-MainNaviScroll::-webkit-scrollbar-thumb {
    background-color: #008ffd;
    border-radius: 12px;
    border-radius: 1.2rem;
  }

  .CL-MainNaviScroll::-webkit-scrollbar-thumb:hover {
    background-color: #37a8ff;
  }
}



/*===================
    サムネイルアイテム横スクロール
  ====================*/
.ThumbnailScroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* テーブルレイアウトをリセット */
  text-align: left;
}

.ThumbnailScroll>ul {
  display: flex;
  /* 横並びに */
  flex-wrap: nowrap;
  /* 折り返さない */
  white-space: nowrap;
  /* テキストも改行しない */
  margin: 0;
  padding: 0;
}

.ThumbnailScroll>ul>li {
  flex: 0 0 auto;
  /* アイテム幅は内容に合わせる */
  list-style: none;
  white-space: nowrap;
  /* 念のため子要素も改行禁止 */
  margin-bottom: 10px;
}

.ThumbnailScroll>ul.liP>li {
  padding: 5px;
}

.ThumbnailScroll>ul.liM>li {
  margin-right: 15px;
}

.ThumbnailScroll::-webkit-scrollbar {
  height: 0.8em;
}

.ThumbnailScroll::-webkit-scrollbar-track {
  background: #F1F1F1;
}

.ThumbnailScroll::-webkit-scrollbar-thumb {
  background-color: #008ffd;
  border-radius: 12px;
  border-radius: 1.2rem;
}

.ThumbnailScroll::-webkit-scrollbar-thumb:hover {
  background-color: #37a8ff;
}






/*
==========================
水色チェックボックス
==========================
*/
.CL-CheckBox::after {
  display: block;
  content: '';
  clear: both;
}

.CL-CheckBox label {
  position: relative;
  display: block;
  word-break: break-all;
}

.CL-CheckBox label>input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.CL-CheckBox label>input+div {
  position: relative;
  padding: 0 0 0 30px;
}

.CL-CheckBox label>input+div::before,
.CL-CheckBox label>input+div::after {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  content: '';
  box-sizing: border-box;
}

.CL-CheckBox label>input+div::before {
  z-index: 0;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: 2px #aaa solid;
  border-radius: 300px;
  background-color: #fff;
}

.CL-CheckBox label>input+div::after {
  z-index: 1;
  margin: 5px 8.5px;
  width: 7px;
  height: 11px;
}

.CL-CheckBox label>input:checked+div::before {
  border-color: #3399ff;
  background-color: #3399ff;
}

.CL-CheckBox label>input+div::after {
  border: 2px solid #aaa;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.CL-CheckBox label>input:checked+div::after {
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.CL-CheckBox label div {
  display: inline-block;
  cursor: pointer;
}

/*サイズ違いののラジオボタンはオーバーライド*/
.CL-CheckBox label>input.CL-Radio-Size-L+div {
  padding: 0 0 0 40px;
}

.CL-CheckBox label>input.CL-Radio-Size-L+div::before {
  width: 32px;
  height: 32px;
}

.CL-CheckBox label>input.CL-Radio-Size-L+div::after {
  margin: 6px 11px;
  width: 9px;
  height: 14px;
}






/*
==========================
ラジオアコーディオンメニュー
==========================
*/
dl.CL-RadioAccordionMenu>dt {
  border-top: solid 1px #ccc;
  padding: 15px 5px 0 5px;
  margin: 15px 0 0 0;
}

dl.CL-RadioAccordionMenu>dd {
  position: relative;
  /*
  display:none;
  */
}

dl.CL-RadioAccordionMenu .CL-RadioAccordionContent {
  padding: 10px 5px 20px 20px;
}

.CL-RadioAccordionLine {
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  left: 5px;
  margin-left: 0;
  background: #3399ff;
  z-index: 1;
}

/*
==========================
流れflow
==========================
*/
.CL-Flow li {
  position: relative;
  background: #fff;
  border-right: 2px solid #003399;
}

.CL-Flow li:after,
.CL-Flow li:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.CL-Flow li:after {
  top: 50%;
  border-width: 9px;
  margin-top: -9px;
  border-left-color: #fff;
}

.CL-Flow li:before {
  top: 50%;
  border-width: 12px;
  margin-top: -12px;
  border-left-color: #003399;
}

.CL-Flow li.CL-FlowEnd,
.CL-Flow li.CL-FlowEnd:before,
.CL-Flow li.CL-FlowEnd:after {
  border: none;
}



/*
==========================
丸囲み数字
==========================
*/
.CL-Circle_L {
  width: 35px;
  height: 35px;
  margin-left: 0;
  color: #003399;
  border-radius: 100%;
  background: #fff;
  display: block;
  text-align: center;
  border: solid 1px #2489ce;
}

.CL-Circle_L>.no {
  padding-top: 4px;
  font-size: 24px;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}

.CL-Circle_M {
  width: 30px;
  height: 30px;
  margin-left: 0;
  color: #003399;
  border-radius: 100%;
  background: #fff;
  display: block;
  text-align: center;
  border: solid 1px #2489ce;
}

.CL-Circle_M>.no {
  padding-top: 4px;
  font-size: 20px;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}




/* ===================
   横幅
   =================== */
.W30 {
  width: 30px !important;
}

.W40 {
  width: 40px !important;
}

.W50 {
  width: 50px !important;
}

.W60 {
  width: 60px !important;
}

.W70 {
  width: 70px !important;
}

.W80 {
  width: 80px !important;
}

.W90 {
  width: 90px !important;
}

.W100 {
  width: 100px !important;
}

.W120 {
  width: 120px !important;
}

.W150 {
  width: 150px !important;
}

.W200 {
  width: 200px !important;
}

.W220 {
  width: 220px !important;
}

.W250 {
  width: 250px !important;
}

.W300 {
  width: 300px !important;
}

.W320 {
  width: 320px !important;
}

.W350 {
  width: 350px !important;
}

.W550 {
  width: 550px !important;
}

.Min-W60 {
  min-width: 20px !important;
}

.Min-W80 {
  min-width: 80px !important;
}

.Min-W100 {
  min-width: 100px !important;
}

.Min-W120 {
  min-width: 120px !important;
}

.Min-W150 {
  min-width: 150px !important;
}

.Min-W250 {
  min-width: 250px !important;
}

.max-W150 {
  max-width: 150px !important;
}

.max-W200 {
  max-width: 200px !important;
}

.max-W250 {
  max-width: 250px !important;
}

.max-W300 {
  max-width: 300px !important;
}

/* --- Mobile (幅768px以下) のスタイル --- */
@media screen and (max-width: 768px) {

  /*
    .SP-W と .SP-G100 が
    同時に指定されている要素に適用
  */
  .SP-W.SP-G100 {
    width: 100%;
  }

  .SP-W30 {
    width: 30px !important;
  }

  .SP-W40 {
    width: 40px !important;
  }

  .SP-W50 {
    width: 50px !important;
  }

  .SP-W60 {
    width: 60px !important;
  }

  .SP-W70 {
    width: 70px !important;
  }

  .SP-W80 {
    width: 80px !important;
  }

  .SP-W90 {
    width: 90px !important;
  }

  .SP-W100 {
    width: 100px !important;
  }

  .SP-W120 {
    width: 120px !important;
  }

  .SP-W150 {
    width: 150px !important;
  }

  .SP-W200 {
    width: 200px !important;
  }

  .SP-W220 {
    width: 220px !important;
  }

  .SP-W250 {
    width: 250px !important;
  }

  .SP-W300 {
    width: 300px !important;
  }

  .SP-W320 {
    width: 320px !important;
  }

  .SP-minW80 {
    min-width: 80px;
  }

  .SP-minW100 {
    min-width: 100px;
  }

  .SP-minW120 {
    min-width: 120px;
  }

  .SP-minW150 {
    min-width: 150px;
  }

  .SP-minW180 {
    min-width: 180px;
  }

  .SP-minW200 {
    min-width: 200px;
  }

  .SP-minW220 {
    min-width: 220px;
  }

  .SP-minW250 {
    min-width: 250px;
  }

  .SP-minW300 {
    min-width: 300px;
  }

  .SP-minW350 {
    min-width: 350px;
  }
}


/* --- PCのみ (幅768px以上) のスタイル --- */
@media screen and (min-width: 769px) {
  .PT-W30 {
    width: 30px !important;
  }

  .PT-W40 {
    width: 40px !important;
  }

  .PT-W50 {
    width: 50px !important;
  }

  .PT-W60 {
    width: 60px !important;
  }

  .PT-W70 {
    width: 70px !important;
  }

  .PT-W80 {
    width: 80px !important;
  }

  .PT-W90 {
    width: 90px !important;
  }

  .PT-W100 {
    width: 100px !important;
  }

  .PT-W120 {
    width: 120px !important;
  }

  .PT-W150 {
    width: 150px !important;
  }

  .PT-W200 {
    width: 200px !important;
  }

  .PT-W220 {
    width: 220px !important;
  }

  .PT-W250 {
    width: 250px !important;
  }

  .PT-W300 {
    width: 300px !important;
  }

  .PT-W320 {
    width: 320px !important;
  }

}




/* ===================
   汎用表示・高さ
   =================== */
.H30 {
  height: 30px;
}

.H40 {
  height: 40px;
}

.H50 {
  height: 50px;
}

.H55 {
  height: 55px;
}

.H60 {
  height: 60px;
}

.H80 {
  height: 80px;
}

.H100 {
  height: 100px;
}

.H110 {
  height: 110px;
}

.H120 {
  height: 120px;
}

.H150 {
  height: 150px;
}

.H200 {
  height: 200px;
}

.H250 {
  height: 250px;
}

.H300 {
  height: 300px;
}

.max-H250 {
  max-height: 250px;
}

/*
======================================================================================================
※重要・コピーライト
======================================================================================================
Copyright 株式会社サインモール All Rights Reserved.
無断転用禁止
当ファイルの無断転用及び複製等の行為を固く禁じます。
*/