@charset "utf-8";
/* CSS Document for Xform 
min-width: 769px
*/

/*-------------------------------
common
-------------------------------*/
*{
box-sizing: border-box;
}

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

common multi style

----------------------------------------------------------*/
/* Chrome でのみフォントを太めに表示する */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
* {
text-shadow: transparent 0 0 0, rgba(0, 0, 0, .7) 0 0 0 !important;
}
}
@keyframes onAutoFillStart { from {} to {}}
input:-webkit-autofill {
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}

html {
font-size: 62.5%;
}
body{
line-height: 1.6;
color:#333;
}
dd, dt , p {
margin: 0
}
img {
border:0 none;
margin:0;
padding:0;
vertical-align: bottom;
}
a{
cursor: pointer;
transition: all 0.1s ease-in-out 0.1s;
color:#4b86df;
text-decoration:none;
}
a, a:visited, a:hover, a:active {
text-decoration: underline;
color: #005580;
}
a:hover{
opacity:0.85;
}
p{
font-size:1.5rem;
line-height:1.5;
text-align:justify;
margin-bottom:1rem;
}

/*h1 ttl ------------------------------*/
h1 {
font-size: 3.4rem;
margin-bottom:1rem;
}
h2 {
font-size: 2.8rem;
margin-bottom:1rem;
}
h3 {
font-size: 2.4rem;
margin-bottom:1rem;
}
h4 {
font-size: 2rem;
margin-bottom:0.5rem;
}
h5 {
font-size: 1.8rem;
margin-bottom:0.5rem;
}
h6 {
font-size: 1.5rem;
margin-bottom:0.5rem;
}
ul li{
list-style: none;
}
/*contents width etc ------------------------------*/
.section_inner {
width:95%;
max-width: 1040px;
margin: 0 auto;
}
.bg_beige{
background:#f7f6ef;
}
.bg_beige .section_inner{
width:95%;
max-width:1040px;
overflow:hidden;
margin:0 auto;
padding: 3rem 0;
}

/*テキスト共通設定------------------------------*/
.text_center {
text-align: center !important;
}
.text_right {
text-align: right !important;
}
.text_left {
text-align: left !important;
}
/*micro clearfix------------------------------*/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
/*--------------------------------------------------------

header

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

header

----------------------------------------------------------*/
header {
    background-color: #fff;
    border: 1px solid #fff;
    height: 80px;
    box-shadow: 0 1px 2px rgba(0, 0, 0,0.3);
    z-index: 999;
  }
  header .inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  header .inner h1 {
    padding: 9px 0 0;
    color: #333;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
  }
    header .inner h1 .sub {
margin-bottom: 6px;
letter-spacing: -0.05rem;
}
  header .inner .tell {
  padding: 21px 0 0;
color: #848484;
font-size: 20px;
font-weight: bold;
letter-spacing: -0.01rem;
text-align: right;
line-height: 1.0;
  }
  header .inner .tell a {
    cursor: default;
    color: #848484;
text-decoration: none;
  }
  .hero__header__rakus {
  max-width: 37px !important;
  margin-left: 14px;
  box-sizing: border-box;
}
.tell img{
vertical-align: top;
display: inline-block !important;
}
 .header__tel__img {
padding-right: 0.6rem;
vertical-align: -0.3rem;
}

#container{
background:  rgba(247,246,239,0.5);
}
#mainBody{
background:  #fff;}
  
/*--------------------------------------------------------

breadcrumb

----------------------------------------------------------*/
/* パンクズトップ側 */
section.breadcrumb {
padding: 6px;
}
/* パンクズボトム側 */
section.breadcrumb2 {
padding: 6px;
}
/* タイトルエリア */
section.title-area {
margin: 0px auto 10px;
padding: 0 0;
text-align: center;
max-width: 1000px;
width: 100%;
}
#TOPIC_PATH {
list-style-type: none;
margin: 9px 0 3px 0;
padding: 0 0 0 0;
width: 900px;
}
#TOPIC_PATH li {
float: left;
font-size: 10px;
font-weight: normal;
padding: 0 20px 0 0;
}
ul#TOPIC_PATH li a{
position: relative;
color: inherit;
text-decoration: none;
}
ul#TOPIC_PATH li a::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
border: 1px solid;
border-color: #565656 #565656 transparent transparent;
transform: rotate(45deg);
top: 3px;
right: -12px;
}
ul#TOPIC_PATH li:last-of-type {
color: #c04251;
}
#TOPIC_PATH .current {
background: none repeat scroll 0 0 transparent;
padding-left: 5px;
}
#TOPIC_PATH li a:visited {
color: #333;
text-decoration: none;
}
/*--------------------------------------------------------

contents

----------------------------------------------------------*/
section.title-area h1 {
font-size: 4rem;
letter-spacing: 0.2rem;
position: relative;
font-weight: 500;	
}
section.title-area h1.kazari {
display: table;
margin: 0 auto;
padding: 0 45px;	
}
section.title-area h1.kazari::before, section.title-area h1.kazari::after{
content: ' ';
position: absolute;
top: 50%;
display: inline-block;
width: 30px;
height: 3px;
background-color: #c04251;
}
section.title-area h1.kazari::before{
left: 0;
}
section.title-area h1.kazari::after{
right:0;
}
section.title-area h1 b{
font-size: 3rem;
}
section.title-area p {
text-align: center;
color: #c04251;
font-size: 3rem;
letter-spacing: 0;
margin-top: 0;
font-weight: 500;
}
section.title-area p.lead {
text-align: center;
color: #333;
font-size: 14px;
letter-spacing: 0;
margin: -10px 0 0;
font-weight: 500;
}
/*--------------------------------------------------------

footer

----------------------------------------------------------*/
/*#colophon*/
#colophon {
font-size: 0.8125em;
font-size: 0.8125rem;
line-height: 160%;
vertical-align: middle;
background:#F7F7F7;
border-top: 3px solid #c04251;
}
.colophon_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-size: 1.3rem;
  }
  .colophon_tagline {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 0;
  }
  .colophon_title {
  display: flex;
  align-items: center;
  width: 72%;
  }
  .colophon_title .rakuslogo {
  width: 65px;
  padding-right: 10px;
  }
  .colophon_title .rakuslogo img {
  width: 100%;
  }
  .colophon_privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28%;
  }
  .colophon_privacy img {
  width: 100%;
  }
  .colophon_privacy .privacy {
  margin-right: 8%;
  width: 28%;
  }
  .colophon_privacy .isms {
  width: 55%;
  }
  section.ft_link {
background: #c04251;
color: #FFF;
width:100%;
}
ul.footer_link {
justify-content: space-between;
display: flex;
width: 95%;
max-width: 1000px;
margin: 0 auto;
}
ul.footer_link {
padding: 10px 0;
text-align: left;
line-height: 120%;
font-family: Arial, Sans-serif;
letter-spacing: 1px;
font-size: 11px;
}
ul.footer_link a{
color: #fff;
display: inline-block;
padding: 0 5px;
}

/*pageTop*/
#pageTop {
position: fixed;
bottom: 20px;
right: 20px;
}
#pageTop a {
display: block;
z-index: 999;
background: #666;
font-size: 18px;
opacity: 0.75;
text-decoration: none;
color: #fff;
padding: 8px 13px;
text-align: center;
border-radius: 5px;
}
#pageTop a:hover {
background: #c04251;
text-decoration: none;
opacity: 1.0;
}

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

Xform

----------------------------------------------------------*/
form{
font-size: 1.6rem;
box-sizing: border-box;
margin: 0 auto;
padding: 20px 40px 10px 40px;
background: rgba(255,255,255,0.6);
border-radius: 20px;
}
/*Xform style reset*/
table.xf_block,th.xf_field,td.xf_input{
padding: 0;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;
background: none;
border: none;
}
table.xf_block{
margin-bottom: 5px;
}
input[type="text"],
input[type="password"],
textarea,
select {
outline: none;
font-family:  Yu Gothic UI,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
letter-spacing: 1px;
}
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
background: #c04251;
border-radius: 5px;
color:#fff;
padding: 20px 30px;
font-size: 30px;
width:90%;
max-width:500px;
font-weight: bold;
cursor: pointer;
letter-spacing: 10px;
}
input[type="submit"]:hover {
background: #d61d33;
}
input[type="submit"].normal{
background: #000;
cursor: pointer;
}

input[type="submit"][disabled] {
background: #bbb !important;
cursor: default;
font-size: 25px;
letter-spacing: 0;
}
input[type="text"],input[type="email"] ,input[type="tel"] {
padding: 0;
border: none;
border-radius: 0;
outline: none;
background: none;
}
.lower input[type=submit]{
margin-top: 40px;
}
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
resize: none;
padding: 0;
border: 0;
outline: none;
background: transparent;
line-height: 1.3;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
background: transparent;
}
input:placeholder-shown {
color: #bbbbbb;
}
::-webkit-input-placeholder {
color: #bbbbbb; 
}
:-ms-input-placeholder {
color: #bbbbbb;
}
/*Set the style for Xform*/
.xf_essential{
color: #fff;
font-size: 1.3rem;
letter-spacing: 0.25rem;
text-indent: 0.25rem;
text-align: center;
display: inline-block;
background: #f89406;
padding: 4px 3px;
border-radius: 3px;
font-weight: normal;
text-shadow: transparent 0 0 0, rgba(0, 0, 0, .0) 0 0 0 !important;
line-height: 1;
vertical-align: 2px;
}
tr{
display: block;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
}
tr:first-child{
border-top: 1px solid #eee;
}

th.xf_field{
font-weight: normal;
background: #eee;
width: 260px !important;
display: table-cell;
padding: 10px;
text-align: left;
border-radius: 1px;
vertical-align: middle;
border-bottom: 1px solid #fff;
}
th.xf_field:last-child{
border-bottom: 0px;
}

td.xf_input{
padding:10px !important;
width: 572px;
border-bottom: 1px solid #eee;
position: relative;
}
td.xf_input span.error-info{
position: absolute;
right: 10px;
padding: 10px;
border-radius: 5px;
font-size: 12px;
color: #d85658;
z-index: 10;
}
td.xf_input input.errorstyle{
border: #d85658 1px solid;
}
input:-internal-autofill-selected {
background-color: #fff !important;
}
.note-txt p{
width: 80%;
margin: 10px auto 0 auto;
text-align: center;
font-size: 13px;
}
input[type="text"],input[type="email"],input[type="tel"], textarea{
border: 1px solid #ccc;
padding: 0.5rem 1rem;
border-radius: 5px;
background: rgba(255,255,255,0.80) !important;
width: 100%;
font-family:  Yu Gothic UI,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
outline:none; 
}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus, textarea:focus{
background: rgb(255,255,255,0.80) !important;
border: 1px solid #0697e5;
outline:none; 
}

input[type="button"] {
padding: 20px;
border: none;
border-radius: 5px;
outline: none;
background: #c04251;
font-size: 20px;
color: #fff;
}
input[type="button"]::hover{
background: #fa2a43;
}
input[type=radio],
input[type=checkbox] {
display: inline-block;
margin-right: 8px;
margin-bottom: 10px;
outline: none !important;
}
input[type=radio] + label,
input[type=checkbox] + label {
position: relative;
display: inline-block;
margin-right: 5px;
cursor: pointer;
outline: none !important;
}
input[type=radio],
input[type=checkbox] {
display: none;
margin: 0;
}
input[type=radio] + label,
input[type=checkbox] + label {
padding: 0 0 0px 28px;
vertical-align: middle;
}
input[type=radio] + label::before,
input[type=checkbox] + label::before {
content: "";
position: absolute;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 20px;
height: 20px;
background: #fff;
margin-top: 2px;
}
input[type=radio] + label::before {
border: 1px solid #ccc;
border-radius: 30px;
}
input[type=checkbox] + label::before {
border: 1px solid #ccc;
}
input[type=radio]:checked + label::after,
input[type=checkbox]:checked + label::after {
content: "";
position: absolute;
top: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}
input[type=radio]:checked + label {
outline: none !important;
background: #fff !important;
}
input[type=radio]:checked + label::after {
left: 3px;
top: 5px;
width: 14px;
height: 14px;
background: #c04251;
border-radius: 50%;
}
input[type=checkbox]:checked + label::after {
left: 3px;
width: 23px;
height: 12px;
margin-top: -13px;
border-left: 4px solid #c04251;
border-bottom: 4px solid #c04251;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

input[aria-invalid="true"], textarea[aria-invalid="true"] {
border: 1px solid #c04251 !important;
box-shadow: 0 0 4px 0 #c04251;
}
input[aria-invalid="true"] + .xf_block{
background-color: #c04251 !important;
/*cursor: default !important;*/
}
/*--------------------------------------------------------

/xform/complete.php

----------------------------------------------------------*/
.section_inner__complete h3{
color: #c04251;
text-align: center;
}
.section_inner__complete p{
text-align: center;
font-size:1.6rem;
}
.section_inner__complete a.btn_top{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
display: block;
outline: none;
background: #c04251;
border-radius: 5px;
color:#fff;
padding: 20px 30px;
font-size: 2rem;
width:90%;
margin: 20px auto;
max-width:500px;
font-weight: bold;
cursor: pointer;
letter-spacing: 0.1rem;
text-decoration: none;
text-align: center;
}
.section_inner__complete a.btn_top:hover {
background: #d61d33;
}
.cross_cell a{
text-decoration: none;
display: block;
width: 90%;
max-width: 660px;
text-align: center;
margin: 60px auto 20px auto;
padding:20px;
background: #fff;
border-radius: 1px;
color: #333;
}
.cross_cell a:hover{
background: #f7fcff;
}
.cross_cell h4{
color: #c04251;
padding: 0 0 5px 0;
font-size: 2rem;
border-bottom: 1px solid #c04251;
}
.cross_cell p{
padding: 10px 5px;
font-size:1.4rem;
}
.cross_cell p img{
width: 100%;
margin: 0 auto;
max-width:400px;
display: block;
}

.cross_cell p span.cross_cell_txtlink{
color: #c04251;
text-decoration: none;
padding: 10px 0;
display: inline-block;
font-size: 1.8rem;
}
.cross_cell p span.cross_cell_txtlink:before{
content:"＞";
}
.cross_cell p span.cross_cell_txtlink:hover{
text-decoration: underline;
color: #27A5B8;
}