/* button 

http://www.webdesignerwall.com/demo/css-buttons.html

usage:

html ex:
<div>
  <input class="btn pink" type="btn" value="Input Element" /> 
  <button class="btn pink">btn Tag</btn>
  <span class="btn pink">Span</span> 
  <div class="btn pink">Div</div> 
  <p class="btn pink">P Tag</p> 
  <h3 class="btn pink">H3</h3> 
</div>

color:
  black, gray, orange, red, blue, rosy, green, pink

style
  round, square

size:
  medium, big, exbig

---------------------------------------------- */
ul.radius li {
    font-size: 12px;
}
ul.radius p {
    font-size: 12px;
    margin: 0 0 10px 0;
    padding: 0;
}
div.qa {
    margin: 15px 20px 10px 20px;
    font-size: 80%;
}
div.qa h3 {
    color: #000000;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 0px 5px 5px;
    margin: 10px 0px 10px 0px;
    border-left: 5px solid #b3b3b3;
    border-bottom: 1px dashed #b3b3b3;
}
.btn {
  display: inline-block;
  zoom: 1; /* zoom and 
display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 1px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px Arial, Helvetica, sans-serif;
  padding: .4em .5em .275em;
  text-shadow: 0 -1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em; 
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);

/* white */
  color: #606060;
  border: solid 1px #b7b7b7;
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  background: -moz-linear-gradient(top,  #fff,  #ededed);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.btn:hover {
  text-decoration: none;

/* white */
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
  background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

.round {
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.square {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
}
.medium {
  font-size: 20px;
  padding: .4em 1.5em .42em;
}
.big {
  font-weight: bold;
  font-size: 24px;
  padding: .5em 2em .55em;
}
.exbig {
  font-weight: bold;
  font-size: 30px;
  padding: .5em 2em .55em;
}
.wide {
  font-size: 20px;
  padding: .4em 1.5em .42em;
  width:94%;
  margin:0 3% 0 3%;
display:inline;
}

/* color styles 
---------------------------------------------- */

/* commit */
.commit {
  color: #fff;
  border: solid 1px #980c10;
  background: #d81b21;
  background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
  background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.commit:hover {
  color: #eee;
  background: #b61318;
  background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
  background: -moz-linear-gradient(top,  #c9151b,  #a11115);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}

/* black */
.black {
  color: #fff;
  border: solid 1px #333;
  background: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
  background: -moz-linear-gradient(top,  #666,  #000);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
  color: #fff;
  background: #000;
  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
  background: -moz-linear-gradient(top,  #444,  #000);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}

/* gray */
.gray {
  color: #fff;
  border: solid 1px #555;
  background: #6e6e6e;
  background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
  background: -moz-linear-gradient(top,  #888,  #575757);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
  color: #fff;
  background: #616161;
  background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
  background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}

/* white */
.white {
  color: #606060;
  border: solid 1px #b7b7b7;
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  background: -moz-linear-gradient(top,  #fff,  #ededed);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
  color: #606060;
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
  background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

/* orange */
.orange {
  color: #fff;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
  color: #fff;
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

/* red */
.red {
  color: #fff;
  border: solid 1px #980c10;
  background: #d81b21;
  background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
  background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
  color: #eee;
  background: #b61318;
  background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
  background: -moz-linear-gradient(top,  #c9151b,  #a11115);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}

/* blue */
.blue {
  color: #fff;
  border: solid 1px #0076a3;
  background: #0095cd;
  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
  background: -moz-linear-gradient(top,  #00adee,  #0078a5);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
  color: #fff;
  background: #007ead;
  background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
  background: -moz-linear-gradient(top,  #0095cc,  #00678e);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}

/* rosy */
.rosy {
  color: #fff;
  border: solid 1px #b73948;
  background: #da5867;
  background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
  background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
  color: #fff;
  background: #ba4b58;
  background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
  background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}

/* green */
.green {
  color: #fff;
  border: solid 1px #538312;
  background: #64991e;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
  background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
  color: #fff;
  background: #538018;
  background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
  background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}

/* pink */
.pink {
  color: #000;
  border: solid 1px #d2729e;
  background: #f895c2;
  background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
  background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
  color: #000;
  background: #d57ea5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
  background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}

h1,h2,h3,h4,h5,h6,ul,li{
  margin:0;
  padding:0;
}

ul{
  list-style: none;
}

.clear{
   clear:both;
}

/*index27*/

.toroku14{
  background: #ffffff;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.toroku14 img{
  width:90%;
  padding: 0;
}

/*-----------------------------
ダウンロードボタン
-----------------------------*/

.download_button{
  height: 30px;
  width: 60%;
  margin: 0 auto;
  background-color: #007bb4;
  background: -webkit-gradient(linear,left top,left bottom, from(#78c9ee),  to(#007bb4));
  background: -moz-linear-gradient(top, #78c9ee, #007bb4);
  border: solid 1px #007bb4;
  border-radius: 10px;
  box-shadow: 0 -1px 2px #a6dbf4 inset;
}

.download_button a{
  text-decoration: none;
  text-align: center;
  display: block;
  color: #fff;
  font-weight: bold;
  line-height: 30px;
  text-shadow: 0 2px 0 #007bb4;
}


/*-----------------------------
退会確認ボタン
-----------------------------*/

.taikai_no{
  height: 30px;
  width: 60%;
  margin: 0 auto;
  background-color: #091980;
  background: -webkit-gradient(linear,left top,left bottom, from(#8edef8),  to(#091980));
  background: -moz-linear-gradient(top, #8edef8, #091980);
  border: solid 1px #091980;
  border-radius: 10px;
  box-shadow: 0 -1px 2px #509aff inset;
}

.taikai_no a{
  text-decoration: none;
  text-align: center;
  display: block;
  color: #fff;
  font-weight: bold;
  line-height: 30px;
  text-shadow: 0 2px 0 #091980;
}

.taikai_yes{
  height: 30px;
  width: 60%;
  margin: 0 auto;
  background-color: #850404;
  background: -webkit-gradient(linear,left top,left bottom, from(#f69c66),  to(#850404));
  background: -moz-linear-gradient(top, #f69c66, #850404);
  border: solid 1px #850404;
  border-radius: 10px;
  box-shadow: 0 -1px 2px #ff5050 inset;
}

.taikai_yes a{
  text-decoration: none;
  text-align: center;
  display: block;
  color: #fff;
  font-weight: bold;
  line-height: 30px;
  text-shadow: 0 2px 0 #850404;
}
.manage_body{
  padding: 10px;
}

.content_title{
  font-size: 1.2rem;
  padding: 10px 0;
}

/* TABLE detail START */
table.manage_detail {
  width: 320px;
  border: 1px #A3A3A3 solid;
  border-collapse: collapse;
  border-spacing: 0;
}

table.manage_detail th {
  padding: 5px;
  border: #A3A3A3 solid;
  border-width: 0 0 1px 1px;
  background: #E3E3E3;
  font-weight: bold;
  line-height: 120%;
  text-align: right;
  white-space: nowrap; 
}
table.manage_detail th.error {
  padding: 5px;
  border: #A3A3A3 solid;
  border-width: 0 0 1px 1px;
  background: #FF6666;
  font-weight: bold;
  line-height: 120%;
  text-align: right;
  white-space: nowrap; 
}
table.manage_detail td {
  padding: 5px;
  border: 1px #A3A3A3 solid;
  border-width: 0 0 1px 1px;
}

table.manage_detail td.inner {
  text-align:center;
  padding:0;
  border:none;
  white-space:nowrap;
}

/* TABLE detail END */

/* TABLE LIST START */
table.manage_list {
  width: 320px;
  border-color: #A3A3A3;
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-spacing: 0;
}

table.manage_list th {
  padding: 3px;
  background: #e3e3e3;
  font-weight: normal;
  line-height: 120%;
  text-align: center;
  white-space: nowrap;
  border-color: #A3A3A3;
  border-style: solid;
  border-width: 1px;
  text-decoration: none;
}

table.manage_list th a:link,a:visited {
  text-decoration: none;
}

table.manage_list tr:hover td {
  background: #efefef;
}

table.manage_list td {
  padding: 3px;
  border-color: #A3A3A3;
  border-style: solid;
  border-width: 1px;
}

/* TABLE LIST END */
div.pagination {
  padding: 3px;
  margin: 15px;
  text-align:center;
}
 
div.pagination a {
  border: 1px solid #dedfde;
  margin-right:3px;
  padding:6px 9px;
  background-color:#ffffff;
  background-position:bottom;
  text-decoration: none;

  color: #007bb4;  
}

div.pagination span {
  margin-right:3px;
  padding:6px 9px;

  background-position:bottom;
  background-color:#ffffff;
  border: 1px solid #dedfde;
  background-image:none;
  background-color:#007bb4;
  color: #fff;
}

div.pagination a:hover, div.meneame a:active {
  border: 1px solid #000;
  background-image:none;
  background-color:#007bb4;
  color: #fff;
}
h2.retire {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #bdbdbd;/*左線*/
  margin: 15px 15px 15px;
}

.button_wrapper{
   text-align:center;
   margin: 10px 0 20px auto;
}

/*-----------------------------
キャリア選択
-----------------------------*/
.select-carrier input {
  display: none;
}
.select-carrier input[type="radio"]:checked.docomo + label {
  color: #f00;
  border: 2px solid #f00;
  background-color: #fff0f0;
}
.select-carrier input[type="radio"]:checked.au + label {
  color: #f07334;
  border: 2px solid #f07334;
  background-color: #fff;
}
.select-carrier input[type="radio"]:checked.softbank + label {
  color: #000;
  border: 2px solid #000;
  background-color: #eaeaea;
}

.select-carrier label {
  color: #ddd;
  border: 2px solid #ddd;
  text-align: center;
  display: inline-block;
  padding: 10px 0px;
  width: 100px;
}
.select-carrier label:hover {
    color: #aaa;
    border: 2px solid #aaa;
    cursor: pointer;
}




/*-----------------------------
コース選択
-----------------------------*/

@font-face{font-family:"IonIcons";src:url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");src:url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");font-weight:normal;font-style:normal}


.select-wrap {
    position: relative;
    margin: 0px 28px 35px 24px;
}
.select-wrap:before {
    z-index: 1;
    position: absolute;
    right: 15px;
    top: 0;
    content: "\f123";
    font-family: "IonIcons";
    line-height: 47px;
    color: #7F878C;
    pointer-events: none;
}
select{
    outline:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 45px;
    padding: 8px 12px;
    border:1px solid #ddd;
    color:#828c9a;
    width:100%;
    border-radius:3px;
}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #828c9a;
}
.select-wrap.select-primary:before{
  color:#fff;
}
.select-wrap.select-primary > select{
  background:#0084B4;
  color:#fff;
  border-color:#0084B4;
}
.select-wrap.select-primary > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}

.select-wrap.select-inverse:before{
  color:#fff;
}
.select-wrap.select-inverse > select{
  color:#fff;
  border-color: #fff;
}

.select-wrap.select-inverse > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}




/*-----------------------------
ラジオボタン
-----------------------------*/

.checkbox-wrap{
}
.label-checkbox input[type="checkbox"]{
  display: none;
}
.label-checkbox{
  cursor: pointer;
  
  position: relative;
}
.label-checkbox .lever{
  display: block;
  color: #ccc;
  font-weight: normal;
  display: inline-block;
  padding: 8px 40px;
  border: 1px solid #e5e5e5;
  border-radius:20px;
  margin-right: 10px;
  margin-bottom: 10px;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox .lever:before{
  content:'';
  position: absolute;
  left: 4px;
  top:4px;
  border: 1px solid #e5e5e5;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius:100%;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox:hover .lever:before{
   border-color: #ddd;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
   background: #5cb85c;
   color: #fff;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
   border-color:#5cb85c;
}
.label-checkbox input[type="checkbox"]:checked + .lever:before{
   left: 100%;
   margin-left: -44px;
   border-color: #fff;
}

.radio-wrap{
  margin: 20px;
}
.label-radio input[type="radio"]{
  display: none;
}
.label-radio{
  cursor: pointer;
  color: #828c9a;
  font-weight: normal;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  margin: 5px;
}
.label-radio .lever:before{
  content:'';
  border: 1px solid #ddd;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  border-radius:10px;
  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:before{
  opacity: 0;
  background: #eee;
  border-color: #eee;
  transform:scale(2);
}
.label-radio .lever:after{
  content:'';
  opacity: 0;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  transform:rotate(-200deg);
  -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:after{
  opacity: 1;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #5bc0de;
  border-bottom: 2px solid #5bc0de;
  transform:rotate(40deg);
}


/*-----------------------------
テキストボックス
-----------------------------*/
textarea.box1{
width:320px;
height:120px;
}


/*-----------------------------
退会ボタン
-----------------------------*/
p.retire {
    margin: 4px 35px 22px 27px;
    padding: 0;
}
.retire_button {
   text-align:center;
   margin: 20px 0px auto;
}


/*-----------------------------
退会ボタン装飾
-----------------------------*/
.btn-flat-border {
  display: inline-block;
  padding: 0.5em 5em;
  text-decoration: none;
  color: #8c8c8c;
  border: solid 1px #8c8c8c;
  border-radius: 2px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #8c8c8c;
  color: white;
}

.btn-flat-dashed-border {
 /* display: inline-block;*/
  padding: 0.5em 9em;
  text-decoration: none;
  color: #8c8c8c;
  border: dashed 1px #8c8c8c;
  border-radius: 3px;
  transition: .4s;
  font-size: 14px;
}

.btn-flat-dashed-border:hover {
  border-style: dotted;
  color: #8c8c8c;
}
/**************************/
/* PHP Rails scaffold.css */
/**************************/

/*
http://predic8.com/iphone-css-layout-theme.htm
http://connecre.com/connelog/connelog00000172.php
*/


/* HTML BASIC START */

body { margin: 0; padding: 0 }

a: {
  text-decoration: none;
}


.b {font-weight:bold;}

.cWhite {color:#fff;}
.cBlue {color:#00adee;}

.m0 {margin:0;}
.m5 {margin:5px;}
.m10 {margin:10px;}
.mT5 {margin-top:5px;}
.mT10 {margin-top:10px;}
.mB5 {margin-bottom:5px;}
.mB10 {margin-bottom:10px;}
.mL5 {margin-left:5px;}
.mL10 {margin-left:10px;}
.mR5 {margin-right:5px;}
.mR10 {margin-right:10px;}

.p0 {padding:0;}
.p5 {padding:5px;}
.p10 {padding:10px;}
.pT5 {padding-top:5px;}
.pT10 {padding-top:10px;}
.pB5 {padding-bottom:5px;}
.pB10 {padding-bottom:10px;}
.pL5 {padding-left:5px;}
.pL10 {padding-left:10px;}
.pR5 {padding-right:5px;}
.pR10 {padding-right:10px;}

.nb {white-space:nowrap;}

.aL {text-align:left;}
.aC {text-align:center;}
.aR {text-align:right;}

/* HTML BASIC END */

* {
  word-break: break-all;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:rgba(255,255,0,0.4);
  -webkit-text-size-adjust:none;
}

body {
  color: #333333;
  font-size: 15px;
  line-height: 1.3;
  font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3"; /* iPhoneバンドル */
  -webkit-text-size-adjust: none; /* 文字の拡大縮小を防ぐ */
}


/* clearfix */
:after { display: block; clear: both; }

em{ color: #db0000;}

p { margin: 0 0 10px 0; padding: 0; }

form { margin-top: 0px; margin-bottom: 0px; }

h1 {
 background-color: #fcc800;
/*
 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#7f7f7f));
  background: -moz-linear-gradient(top, #ffffff,#7f7f7f7f);
*/
/*
  clear:both;
  margin:0 0 7px;
  padding:7px 0 5px 7px;
  box-shadow: 1px 1px 2px #BCBBBB;
  -webkit-box-shadow: 1px 1px 2px #962929;
  -moz-box-shadow: 1px 1px 2px #962929;
  background: linear-gradient(#b4bfce, #6d83a1) repeat scroll 0 0 transparent;
*/
  margin: 0px;
  height: 34px;
  font-size: 18px;
  text-shadow: 0px 1px 1px #624b2e;
  border-bottom: 1px solid #624b2e;
  color: white;
  padding: 9px 0 0 0;
  text-align: center;
}

h2{
  text-align: left;
  font-size: 17px;
  margin-left: 12px;
  padding: 10px 0;
  margin: 0;
}

.btn-left {
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  padding:7px;
}

.btn-left a{
  background: -moz-linear-gradient(#e1ef45, #bfd002);
  background: -webkit-gradient(linear, 0 0%, 0 100%, from(#e1ef45), to(#bfd002));

  box-shadow: 1px 1px 1px 0px #ebf66f inset;
  text-shadow: 0px -1px 1px #b4c309;
  border: 1px solid #bfd002;
  border-radius: 4px;
  font: bold 12px Arial;
  text-align: center;
  line-height: 28px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  -webkit-tap-highlight-color: white;
  padding: 8px 5px;
  text-decoration: none;
  min-width: 30px;
  width: auto !important;
  width: 30px;
}

.btn-right {
  white-space: nowrap;
  position: absolute;
  top: 0;
  right: 0;
  padding:7px;
}

.btn-right a{
  background: -moz-linear-gradient(#e66a6a, #f39797);
  background: -webkit-gradient(linear, 0 0%, 0 100%, from(#e66a6a), to(#f39797));

  box-shadow: 1px 1px 1px 0px #db5e5e inset;
  text-shadow: 0px -1px 1px #9b5353;
  border: 1px solid #932121;
  border-radius: 4px;
  font: bold 12px Arial;
  text-align: center;
  line-height: 28px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  -webkit-tap-highlight-color: white;
  padding: 8px 5px;
  text-decoration: none;
  min-width: 30px;
}

input[type="checkbox"],
input[type="radio"],
select { display:inline; vertical-align: baseline ;margin-right: 5px ;}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999 ;
}

input[type="text"],
input[type="password"] {
  color: #5a5c63;
  font-size: 100% ;
  width: 100% ;
  padding: 3px ;
}
select {
  color: #5a5c63;
  font-size: 100% ;
  padding: 3px ;
}
textarea {
  color: #5a5c63;
  font-size: 100% ;
  width: 100% ;
  height: 100px ;
  padding: 3px ;
  margin-bottom: 10px ;
}

#footer {
  text-align:center;
}

table.detail{
  border-spacing: 0 3px;
  width: 100%;
  padding: 0 10px 0 10px;
  empty-cells:show;
}

table.detail th{
  text-align: left;
  border-color:#878787;
  border-style:solid;
  border-width:1px 0 1px 1px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding:0 10px 0 10px;
  background-color: #fff;
  padding: 10px;
}

table.detail td{
  border-color:#878787;
  border-style:solid;
  border-width:1px 1px 1px 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #fff;
  
}

table.detail input[type="text"],
table.detail input[type="password"]
{
  border:0;
}

/* TABLE LIST START */
table.list {
  width: 100%;
  border-color: #A3A3A3;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size:70%;
}

table.list th {
  padding: 1px;
  border-top: 2px #627EB7 solid;
  border-bottom: 2px #000000 solid;
  border-left: 1px #FFFFFF solid;
  background: #e3e3e3;
  font-weight: normal;
  line-height: 120%;
  text-align: center;
  white-space: nowrap;
}

table.list th a:link {
  text-decoration: none;
}

table.list th a:visited {
  text-decoration: none;
}

table.list tr:hover td {
  background: #f5d4cc;
/*  color: #FFFFFF; */
}

table.list td {
  padding: 1px;
  border: 1px #eeeeee solid;
  border-width: 0 0 1px 1px;
}

table.list td.manage {
  padding: 1px;
/*
  border: 1px #A3A3A3 solid;
  border-width: 0 0 1px 1px;
*/
  white-space: nowrap;
}

/* TABLE LIST END */

/* TABLE LIST_IMAGE START */
table.list_image {
  border-collapse: collapse;
  border-spacing: 0;
  font-size:85%;
}

table.list_image th {
  padding: 5px;
/*
  border-bottom: 1px #aaaaaa solid;
*/
  font-weight: normal;
  line-height: 120%;
  text-align: center;
}

table.list_image tr:hover td.item {
  background: #f5d4cc;
}

table.list_image td.item {
  padding: 5px;
}

table.list_image td.manage {
  padding: 5px;
  border-top: 1px #A3A3A3 solid;
  text-align: center;
}

/* TABLE LIST_IMAGE END */


/* LIST LINK START */
ul.link {
  font-size: 12pt;
  padding: 0;
  height: auto;
  width: auto;
  list-style: none;
}

ul.link li{
  border-color:#878787;
  border-style:solid;
  border-width:0 0 1px 0;
  background-color: white;
/*  font-weight: bold; */
}

ul.link li.arrow,
ul.link li.icon_arrow{
  background-image: url("/images/sp/arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
}

ul.link li.arrow a,
ul.link li.arrow a:active{
  background: none;
  padding: 12px 15px;
  display: block;
  width: auto;
  text-decoration: none;
  color: black;
}

ul.link li.icon_arrow a,
ul.link li.icon_arrow a:active{
  background: none;
  padding: 5px 15px;
  display: block;
  width: auto;
  text-decoration: none;
  color: black;
}

ul.link li.arrow_blue{
  background-image: url("/images/sp/arrow_blue.png");
  background-position: right center;
  background-repeat: no-repeat;
}

/*
blue from(#058cf5), to(#015fe6)
red from(#ff3333), to(#990000)
*/
/*
ul.link li.arrow a:hover,
ul.link li.icon_arrow a:hover{
  background: url("/images/sp/arrow.png") right center no-repeat, -webkit-gradient(linear, 0 0%, 0 100%, from(#058CF5), to(#015FE6));
  background: url("/images/sp/arrow.png") right center no-repeat, -moz-linear-gradient(#058CF5, #015FE6);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#058CF5', endColorstr='#015FE6');
  color: white;
  text-shadow: 0px -1px 1px #000;
  background: url("/images/sp/arrow.png") right center no-repeat,
}
/*
ul.link li.arrow.blue a:hover{
  background: url("/images/sp/arrow.png") right center no-repeat, -webkit-gradient(linear, 0 0%, 0 100%, from(#00adee), to(#0078a5));
  background: url("/images/sp/arrow.png") right center no-repeat, -moz-linear-gradient(#00adee, #0078a5);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
  color: white;

  text-shadow: 0px -1px 1px #000;
  background: url("/images/sp/arrow.png") right center no-repeat,
}
*/

ul.link li span.right{
  position:absolute;
  right: 45px;
  text-align: right;
  color: #385487;
  font-weight: normal;
}

ul.link li.title{
  padding: 12px 15px;
  display: block;
  width: auto;
  text-decoration: none;
}

ul.link li img.icon{
  background: none;
  padding: 0 10px 0 0;
  width: 35px;
  height: 35px;
  text-decoration: none;
  vertical-align: -12px;
}
/* LIST LINK END */

/* LIST TEXT START */
ul.text {
  font-size: 12pt;
  padding: 0;
  height: auto;
  width: auto;
  list-style: none;
}

ul.text li{
  border-color:#878787;
  border-style:solid;
  border-width:1px 0 1px 0;
  margin-bottom: -2px;
}

ul.text li span.right{
  position:absolute;
  right: 45px;
  text-align: right;
  color: #385487;
  font-weight: normal;
}
/* LIST TEXT END */

/* LIST RADIUS START */
ul.radius {
  font-size: 12pt;
  padding: 0;
  height: auto;
  width: auto;
  list-style: none;
}

ul.radius li{
  padding: 10px;
  margin:10px;
  border-style:solid;
  border-width: 1px;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
}

ul.radius li span.right{
  position:absolute;
  right: 45px;
  text-align: right;
  color: #385487;
  font-weight: normal;
}
/* LIST RADIUS END */


/*スタバコミック*/

#header25{
  width:100%;
  height:auto;
  position:relative;
}

h1#top25{
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  border: none;
}

#top25 img{
  width:100%;
}

.top_logo25{
  border: none;
}

.top_logo25 img{
  width:100%;
}

.header25_b{
  margin: 0;
  padding: 0;
  list-style: none;
  height: 45px;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.header25_b li{
  margin-left: 3px;
  float: left;
}

h2.title_25,
h3.title_25{
  color:#492c19;
  line-height: 1;
  background: #fcc800;
  background: linear-gradient(to bottom, #fedf70, #efa524);
  padding: 10px 0 10px 6px;
  border-top: solid 2px #624b2e;
  border-bottom: solid 2px #624b2e;
  font-size:1.15rem;
  text-shadow: 1px 1px 0 #ffffff;
}

ul.link li.list_25,
table.list_25{
  margin-bottom: 0;
  background: #fffac8;
/*  background: linear-gradient(to bottom, #fefefe, #f6f6f6);*/
  border-top: none;
  border-bottom: solid 1px #f57900;
}

ul.link li.list_25 a{
  display: block;
  color: #725333;
}

ul.link li.list_25 .list_title{
  color: #725333;
}

ul.link li.list_25_2{
  margin-bottom: 0;
  background: #e7f35b;
  /*background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f6f6f6));
  background: -moz-linear-gradient(top, #fefefe, #f6f6f6);*/
  border-top: none;
  border-bottom: solid 1px #f57900;
}

ul.link li.list_25_2 a{
  display: block;
  color: #725333;
}

ul.link li.list_more25{
  background: #fffac8;
  /*background: -webkit-gradient(linear, left top, left bottom, from(#fff),color-stop(0.2, #fff), to(#fae2e8));
  background: -moz-linear-gradient(top, #fff,#fff 20%, #fae2e8);*/
  color: #725333;
  border-top: none;
  border-bottom: solid 1px #f57900;
  text-align: right;
}

ul.link li.list_more25 a{
  display: block;
  color: #725333;
  font-weight: bold;
  background: url("/images/sp/arrow.png") no-repeat right center;
  /*background-image: url("/images/sp/arrow.png")*/
  text-decoration: none;
  padding: 10px 25px 10px 0;
}



.naiyo{
  font-size: 14px;
  line-height:16px;
}

ul.link .list_more{
  text-align:center;
  border-bottom:none;
  padding-top:10px;
}

ul.link .list_more img{
  width:85%;
}

/*ul.link li.arrow2{
  background-image: url("/images/sp/arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
}*/

ul.link li.arrow2 a,
ul.link li.arrow2 a:active{
  background-image: url("/images/sp/arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding: 12px 15px;
  display: block;
  width: auto;
  text-decoration: none;
  color: black;
}

ul.link li.arrow3 a,
ul.link li.arrow3 a:active{
  background-image: url("/images/arrow2.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding: 12px 15px;
  display: block;
  width: auto;
  text-decoration: none;
  color: black;
}


/*-----------------------
ランキング
-----------------------*/
.rank1,
.rank2,
.rank3{
  padding: 1px 0;
  font-size: 16px;
  font-weight: bold;
}

.ranking a{
  text-decoration: none;
}

.rank1{
  color: #c8a826;
  text-shadow: 1px 1px 0 #604807;
  background: -webkit-gradient(linear, left top, left bottom ,from(#e2db93),color-stop(0.3, #fdfad5),color-stop(0.4, #ffffff), color-stop(0.55, #f2ecaa),color-stop(0.7, #f2ecaa), to(#e2df8e));
  background: -moz-linear-gradient(top ,  #e2db93, #fdfad5 30%, #ffffff 40%, #f2ecaa 55%, #f2ecaa 70%, #e2df8e);
  border:solid 1px #74744d;
  border-radius: 3px;
}

.rank2{
  color: #b3b3b3;
  text-shadow: 1px 1px 0 #505050;
  background: -webkit-gradient(linear, left top, left bottom ,from(#d6d6d6),color-stop(0.3, #f6f6f6),color-stop(0.4, #ffffff), color-stop(0.55, #f0f0f0),color-stop(0.7, #f0f0f0), to(#cecece));
  background: -moz-linear-gradient(top ,  #d6d6d6, #f6f6f6 30%, #ffffff 40%, #f0f0f0 55%, #f0f0f0 70%, #cecece);
  border:solid 1px #717171;
  border-radius: 3px;
}

.rank3{
  color: #af6719;
  text-shadow: 1px 1px 0 #603107;
  background: -webkit-gradient(linear, left top, left bottom ,from(#e2b893),color-stop(0.3, #fdecd5),color-stop(0.4, #ffffff), color-stop(0.55, #f2d8aa),color-stop(0.7, #f2d8aa), to(#e2b58e));
  background: -moz-linear-gradient(top ,  #e2b893, #fdecd5 30%, #ffffff 40%, #f2d8aa 55%, #f2d8aa 70%, #e2b58e);
  border:solid 1px #745e4d;
  border-radius: 3px;
}

.rank_title{
  color: #725333;
}

/*-----------------------
ジャンル
-----------------------*/
ul.genre li{
  width:50%;
  float:left;
  font-size: 11px;
  box-sizing: border-box;
}

ul.genre li:nth-child(2n){
  border-left: solid 1px #f57900;
}

/*-----------------------
コミック詳細ページ
-----------------------*/

.book_info{
  width: 95%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.book_image{
  width:100px;
}

.book_info table{
  border-collapse:collapse;
  width:100%;
}

.book_info table tr{
  border-bottom: solid 1px #bdbdbd;
}

.book_info table th{
  height: 30px;
  width: 60px;
  padding-right: 5px;
}

table.book_info table{
  font-size: 14px;
}

.series{
  width: 95%;
  border: solid 1px #fcc800;
  border-radius: 3px;
  margin: 0 auto;
}

h2.series_title{
  background-color: #fcc800;
  color: #492c19;
  padding :5px 0 5px 10px;
  margin: 0 auto;
}

p.outline{
  padding: 5px 10px 5px 10px;
}

.series_list{
  background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom ,from(#ffffff), to(#fbffc9));
  background: -moz-linear-gradient(top ,  #ffffff,#fbffc9);
  padding: 7px 0;
  border-bottom: solid 1px #d5d5d5;
}

/*一覧ページ*/

.ichiran_list{
  width: 100%;
  padding: 3px 0;
  background: #fffac8;
/*
  background: -webkit-gradient(linear, left top, left bottom ,from(#ffffff), to(#e6e6e6));
  background: -moz-linear-gradient(top ,  #ffffff,#e6e6e6);
*/
  padding: 7px 0;
  border-top: solid 1px #f57900;
  border-bottom: solid 1px #a75200;
}

/*-----------------------------
ダウンロードページ
-----------------------------*/

.book_info .download_info{
  font-size: 13px;
}

.book_info .download_info th{
  font-weight: bold;
  color: #492c19;
  width: 60px;
}

.attention{
 width: 90%;
 border: solid 2px #fcc800;
 border-radius: 3px;
 padding: 5px;
 margin:10px auto 10px auto;
}

.download_back{
  border-top: solid 1px #fcc800;
  border-bottom: solid 1px #fcc800;
  background: #e0eb60;
}

.download_back a{
 text-decoration: none;
 display: block;
 color: #492c19;
 padding: 8px;
}

.download_back a:link,
.download_back a:vitited{
 color: #492c19;
}

/*---------------------------
__footer
---------------------------*/
#footer{
  padding:5px 0 5px 0;
  color: #492c19;
  font-weight: bold;
  /*text-shadow:1px 1px 0 #fff0f0;*/
  background-color: #fcc800;
}

#footer-base {
	margin: 0;
	padding: 2px 0;
	text-align: center;
	background-color: #bfd002;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
        font-size: 13px;
}

#footer-base #footer-nav {
	display: table;
	height: 14px;
	margin: 3px auto 3px;
	padding: 5px;
	width: 97%;
	background-color: #bfd002;
/*
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #eaff00;
	border-bottom-color: #eaff00;
*/
	color: #FFFFFF;
}


#footer-base small {
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
-moz-text-shadow: 0 1px 0 rgba(0,0,0,0.2);
-webkit-text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}


#menu{
  width:90%;
  margin: 10px auto;
  border :solid 1px #c15f00;
  border-radius: 6px;
}

#menu ul li a{
  padding: 8px 10px;
  line-height: 1;
  font-size:14px;
}

#menu ul li:nth-child(1){
  border-radius: 5px 5px 0 0;
}

#menu ul li:last-child{
  border-radius: 0 0 5px 5px;
}
/*-----------------------------
作品バナー
-----------------------------*/
.banner{
  width: 97%;
  margin: 10px auto;
}

.banner_button{
  margin: 5px 0;
}

.banner_group{
  display: table;
  table-layout: fixed;
  width: 100%;
}

.banner_group .banner_button2{
  display: table-cell;
  text-align: center;
}




/*-----------------------------
新LP
-----------------------------*/
.c2h-hero,
.c2h-hero *,
.c2h-hero *::before,
.c2h-hero *::after {
  box-sizing: border-box;
}

.c2h-hero {
  --c2h-ink: #171717;
  --c2h-yellow: #ffd530;
  --c2h-yellow-deep: #ffbd17;
  --c2h-sky: #77d2ff;
  --c2h-pink: #ff5eb6;
  --c2h-pink-deep: #ff3a8d;
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 auto 12px;
  width: 100%;
  max-width: 480px;
  min-height: 100svh;
  background: linear-gradient(180deg, #fffefb 0%, #fff8da 62%, #fff6d1 100%);
  isolation: isolate;
  color: var(--c2h-ink);
  font-family:
    "Hiragino Sans",
    "Yu Gothic",
    "Noto Sans JP",
    sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.c2h-hero__bg,
.c2h-hero__confetti {
  pointer-events: none;
  position: absolute;
}

.c2h-hero__bg {
  inset: 0;
  z-index: 0;
}

.c2h-hero__bg--rays {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 36%),
    repeating-conic-gradient(
      from -20deg at 20% 18%,
      rgba(255, 213, 48, 0.2) 0deg 4deg,
      rgba(255, 213, 48, 0.02) 4deg 10deg
    ),
    repeating-conic-gradient(
      from 140deg at 82% 78%,
      rgba(255, 189, 23, 0.1) 0deg 5deg,
      rgba(255, 189, 23, 0) 5deg 12deg
    ),
    linear-gradient(180deg, #fffefb 0%, #fff8da 62%, #fff6d1 100%);
}

.c2h-hero__bg--dots {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 94, 182, 0.22) 0 2px, transparent 3px)
      0 0 / 22px 22px,
    radial-gradient(circle at 88% 18%, rgba(119, 210, 255, 0.28) 0 2px, transparent 3px)
      0 0 / 24px 24px,
    radial-gradient(circle at 82% 74%, rgba(255, 213, 48, 0.18) 0 2px, transparent 3px)
      0 0 / 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 78%);
}

.c2h-hero__confetti {
  z-index: 1;
  border-radius: 999px;
}

.c2h-hero__confetti--a {
  top: 9%;
  right: 7%;
  width: 20px;
  height: 78px;
  background: linear-gradient(180deg, var(--c2h-pink) 0%, var(--c2h-pink-deep) 100%);
  transform: rotate(28deg);
  animation: c2hFloatA 5.8s ease-in-out infinite;
}

.c2h-hero__confetti--b {
  left: 4%;
  top: 55%;
  width: 13px;
  height: 104px;
  background: linear-gradient(180deg, var(--c2h-sky) 0%, #35b0ff 100%);
  transform: rotate(-62deg);
  animation: c2hFloatB 6.4s ease-in-out infinite;
}

.c2h-hero__confetti--c {
  right: 5%;
  top: 38%;
  z-index: 3;
  width: 13px;
  height: 68px;
  background: linear-gradient(180deg, var(--c2h-yellow) 0%, var(--c2h-yellow-deep) 100%);
  transform: rotate(36deg);
  animation: c2hFloatC 5.1s ease-in-out infinite;
}

.c2h-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: 24px 18px 92px;
}

.c2h-hero__copy {
  position: relative;
  z-index: 3;
  max-width: 356px;
}

.c2h-hero__logo {
  display: block;
  width: min(238px, 64vw);
  height: auto;
  margin: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
  animation: c2hSoftRise 0.9s ease-out both;
}

.c2h-hero__eyebrow,
.c2h-hero__title,
.c2h-hero__lead,
.c2h-hero__bubble,
.c2h-hero__cta-label,
.c2h-hero__cta-arrow {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.c2h-hero__eyebrow {
  display: inline-flex;
  margin-top: 14px;
  border: 3px solid var(--c2h-ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  animation: c2hSoftRise 0.9s ease-out 0.08s both;
}

.c2h-hero__title {
  margin-top: 14px;
  font-size: clamp(44px, 13vw, 68px);
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -0.06em;
  text-shadow:
    0 3px 0 rgba(255, 255, 255, 0.82),
    0 0 14px rgba(255, 255, 255, 0.58);
  animation: c2hSoftRise 0.9s ease-out 0.16s both;
}

.c2h-hero__title-line {
  display: block;
  white-space: nowrap;
}

.c2h-hero__title-accent {
  color: var(--c2h-pink-deep);
}

.c2h-hero__lead {
  margin-top: 14px;
  max-width: 22ch;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
  color: #222;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.95),
     1px -1px 0 rgba(255, 255, 255, 0.95),
    -1px  1px 0 rgba(255, 255, 255, 0.95),
     1px  1px 0 rgba(255, 255, 255, 0.95),
     0 2px 8px rgba(255, 255, 255, 0.45);
  animation: c2hSoftRise 0.9s ease-out 0.24s both;
}

.c2h-hero__visual-wrap {
  position: absolute;
  right: -2px;
  bottom: 132px;
  z-index: 2;
  width: min(71vw, 354px);
  pointer-events: none;
  transform: translateX(-20px);
  animation:
    c2hVisualIn 1s cubic-bezier(0.2, 0.9, 0.2, 1) 0.18s both,
    c2hVisualFloat 6.5s ease-in-out 1.2s infinite;
}

.c2h-hero__visual-glow {
  position: absolute;
  inset: -6% -10%;
  background: radial-gradient(
    ellipse 50% 42% at 52% 50%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0) 72%
  );
}

.c2h-hero__visual-wrap::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 20%;
  bottom: -12px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(ellipse closest-side, rgba(23, 23, 23, 0.28), transparent);
  filter: blur(5px);
}

.c2h-hero__visual {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.16));
}

.c2h-hero__bubble {
  position: absolute;
  left: 16px;
  bottom: 210px;
  z-index: 4;
  min-width: 146px;
  border: 4px solid var(--c2h-ink);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdfd 0%, #ffe7f4 100%);
  padding: 15px 18px 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  animation:
    c2hSoftRise 0.9s ease-out 0.34s both,
    c2hBubbleFloat 4.8s ease-in-out 1s infinite;
}

.c2h-hero__bubble::before {
  content: "";
  position: absolute;
  left: 20px;
  bottom: -18px;
  width: 26px;
  height: 26px;
  background: #ffeef7;
  border-left: 4px solid var(--c2h-ink);
  border-bottom: 4px solid var(--c2h-ink);
  transform: rotate(-18deg) skewX(-10deg);
  border-bottom-left-radius: 8px;
}

.c2h-hero__bubble::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -28px;
  width: 10px;
  height: 10px;
  background: #fff4fa;
  border: 4px solid var(--c2h-ink);
  border-radius: 50%;
}

.c2h-hero__cta-row {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 18px;
  z-index: 6;
  width: calc(100% - 28px);
  max-width: 336px;
  transform: translateX(-50%);
  animation: c2hCtaRise 0.9s ease-out 0.42s both;
}

.c2h-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 74px;
  padding: 0 20px;
  border: 4px solid var(--c2h-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffbf46 0%, #ff8f1f 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 8px 0 #ba5600,
    0 12px 24px rgba(186, 86, 0, 0.22);
  text-decoration: none;
  text-align: center;
  backdrop-filter: blur(2px);
  overflow: hidden;
}

.c2h-hero__cta-label {
  color: #fff;
  font-size: clamp(20px, 5.8vw, 29px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    0 0 10px rgba(255, 255, 255, 0.18);
}

.c2h-hero__cta-arrow {
  color: #fff;
  font-size: 19px;
  line-height: 1;
  transform: translateY(1px);
}

@media (max-width: 420px) {
  .c2h-hero {
    min-height: 100dvh;
  }

  .c2h-hero__inner {
    min-height: 100dvh;
    padding: 18px 14px 88px;
  }

  .c2h-hero__logo {
    width: min(214px, 62vw);
  }

  .c2h-hero__eyebrow {
    margin-top: 12px;
    padding: 6px 11px;
    font-size: 11px;
  }

  .c2h-hero__title {
    margin-top: 12px;
    font-size: clamp(36px, 12vw, 54px);
  }

  .c2h-hero__lead {
    margin-top: 12px;
    max-width: 18ch;
    font-size: 14px;
  }

  .c2h-hero__visual-wrap {
    right: -4px;
    bottom: 142px;
    width: min(68vw, 294px);
    transform: translateX(-8px);
  }

  .c2h-hero__bubble {
    left: 12px;
    bottom: 244px;
    min-width: 126px;
    padding: 12px 14px 12px;
    font-size: 13px;
  }

  .c2h-hero__cta-row {
    left: 50%;
    right: auto;
    bottom: 16px;
    width: calc(100% - 20px);
    max-width: 320px;
  }

  .c2h-hero__cta {
    min-height: 68px;
    gap: 8px;
    padding: 0 16px;
  }

  .c2h-hero__cta-label {
    font-size: clamp(16px, 6vw, 24px);
  }

  .c2h-hero__cta-arrow {
    font-size: 16px;
  }
}

@keyframes c2hSoftRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes c2hCtaRise {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes c2hVisualIn {
  from {
    opacity: 0;
    transform: translateX(-20px) translateY(22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-20px) translateY(0) scale(1);
  }
}

@keyframes c2hVisualFloat {
  0%,
  100% {
    transform: translateX(-20px) translateY(0);
  }
  50% {
    transform: translateX(-20px) translateY(-8px);
  }
}

@keyframes c2hBubbleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes c2hFloatA {
  0%,
  100% {
    transform: rotate(28deg) translateY(0);
  }
  50% {
    transform: rotate(28deg) translateY(-8px);
  }
}

@keyframes c2hFloatB {
  0%,
  100% {
    transform: rotate(-62deg) translateY(0);
  }
  50% {
    transform: rotate(-62deg) translateY(7px);
  }
}

@keyframes c2hFloatC {
  0%,
  100% {
    transform: rotate(36deg) translateY(0);
  }
  50% {
    transform: rotate(36deg) translateY(-6px);
  }
}



/* ========================================
   ＣＯＭＩＣ×２ 分解画像LP 品質チェック版 v8
   既存CSSの末尾へ追記
   ======================================== */

.c2lp,
.c2lp *,
.c2lp *::before,
.c2lp *::after {
  box-sizing: border-box;
}

.c2lp {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: #111;
  line-height: 0;
  word-break: normal;
  -webkit-tap-highlight-color: rgba(255, 219, 0, 0.3);
}

/* padding-bottomをHTMLへ直接指定し、aspect-ratio非対応ブラウザにも対応 */
.c2lp-section {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 0;
  margin: 0;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  background: #fff;
}

.c2lp-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.c2lp-layer {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 0;
  transform-origin: center center;
}

.c2lp-layer__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.c2lp-register {
  z-index: 8;
  cursor: pointer;
  text-decoration: none;
}

.c2lp-register:focus {
  outline: 4px solid #126edb;
  outline-offset: 4px;
  border-radius: 999px;
}

.c2lp-register::after {
  content: "";
  position: absolute;
  left: -28%;
  top: 3%;
  z-index: 3;
  display: block;
  width: 22%;
  height: 78%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.75) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transform: skewX(-18deg);
  pointer-events: none;
}

#header25 + .toroku14,
.c2lp + .toroku14 {
  display: none;
}

/* JSが動く場合だけ初期状態を隠す。JS無効時は静止画として表示 */
.c2lp-js .c2lp-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: 1.35s, 1.45s, 1.4s, 1.55s;
  transition-timing-function: ease-out, cubic-bezier(0.18, 0.78, 0.22, 1), ease-out, cubic-bezier(0.18, 0.78, 0.22, 1);
}

.c2lp-js .c2lp-scale {
  transform: scale(1.02);
  filter: blur(1px);
}

.c2lp-js .c2lp-curtain {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}

.c2lp-js .c2lp-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* 文字・コピーはビジュアルより先に読み取れる速度で表示 */
.c2lp-js .c2lp-empathy-title,
.c2lp-js .c2lp-empathy-conclusion,
.c2lp-js .c2lp-benefits-title,
.c2lp-js .c2lp-discovery-title,
.c2lp-js .c2lp-discovery-subcopy,
.c2lp-js .c2lp-final-logo,
.c2lp-js .c2lp-final-headline,
.c2lp-js .c2lp-final-subcopy,
.c2lp-js .c2lp-final-cta {
  transition-duration: 0.95s, 1.05s, 1s, 1.1s;
}

/* FVは最優先。見出しを先に読ませ、CTAも早めに着地させる */
.c2lp-js .c2lp-hero-title-cluster {
  transition-duration: 0.75s, 0.85s, 0.8s, 0.9s;
}

.c2lp-js .c2lp-hero-cta {
  transition-duration: 0.85s, 0.95s, 0.9s, 1s;
}

/* 登録ボタンは軽い脈動と光の走査で、常時モーションより強く訴求 */
.c2lp-js .c2lp-register.is-visible .c2lp-layer__image {
  animation: c2lp-cta-pulse 2.6s ease-in-out 0.8s infinite;
}

.c2lp-js .c2lp-register.is-visible::after {
  animation: c2lp-cta-shine 3.8s ease-in-out 1.1s infinite;
}

/*
 * 再生成済みの独立PNGだけをゆっくり浮遊させる。
 * 表示開始用transformは外側、常時モーションは内側imgへ分離。
 */
.c2lp-js .c2lp-reveal.is-visible.c2lp-float-a .c2lp-layer__image {
  animation: c2lp-float-a 5.8s ease-in-out 0.2s infinite;
}

.c2lp-js .c2lp-reveal.is-visible.c2lp-float-b .c2lp-layer__image {
  animation: c2lp-float-b 6.6s ease-in-out -1.4s infinite;
}

.c2lp-js .c2lp-reveal.is-visible.c2lp-float-c .c2lp-layer__image {
  animation: c2lp-float-c 7.2s ease-in-out -2.2s infinite;
}

.c2lp-js .c2lp-reveal.is-visible.c2lp-float-soft .c2lp-layer__image {
  animation: c2lp-float-soft 7.8s ease-in-out -0.8s infinite;
}

.c2lp-js .c2lp-benefit-2.is-visible .c2lp-layer__image {
  animation-delay: -2.6s;
}

.c2lp-js .c2lp-benefit-3.is-visible .c2lp-layer__image {
  animation-delay: -4.1s;
}

@keyframes c2lp-float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

@keyframes c2lp-float-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2px, -4px, 0); }
}

@keyframes c2lp-float-c {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-2px, -5px, 0); }
}

@keyframes c2lp-float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -3px, 0); }
}

@keyframes c2lp-cta-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255, 216, 0, 0));
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.1) saturate(1.08) drop-shadow(0 0 10px rgba(255, 216, 0, 0.72));
  }
}

@keyframes c2lp-cta-shine {
  0%, 52% {
    left: -28%;
    opacity: 0;
  }
  58% {
    opacity: 0.9;
  }
  76% {
    left: 108%;
    opacity: 0;
  }
  100% {
    left: 108%;
    opacity: 0;
  }
}

@media (max-width: 360px) {
  .c2lp-js .c2lp-reveal {
    transform: translate3d(0, 10px, 0);
  }

  .c2lp-js .c2lp-curtain {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c2lp *,
  .c2lp *::before,
  .c2lp *::after {
    animation: none !important;
    transition: none !important;
  }

  .c2lp-js .c2lp-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}