@charset "utf-8";

/* ----------------------------------------------------------------
Foundation
----------------------------------------------------------------- */

/* Normalize
----------------------------------------------------------------- */
/* normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
html{
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: sans-serif;
}
body{
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary{
display: block;
}
audio,
canvas,
progress,
video{
display: inline-block;
}
audio:not([controls]){
display: none;
height: 0;
}
progress{
vertical-align: baseline;
}
template,
[hidden]{
display: none;
}
a{
background-color: transparent;

-webkit-text-decoration-skip: objects;
}
/*a:active,
a:hover{
outline-width: 0;
}*/
abbr[title]{
border-bottom: 0;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong{
font-weight: inherit;
}
b,
strong{
font-weight: bolder;
}
dfn{
font-style: italic;
}
h1{
margin: .67em 0;
font-size: 2em;
}
mark{
background-color: #ff0;
color: #000;
}
small{
font-size: 80%;
}
sub,
sup{
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
}
sub{
bottom: -.25em;
}
sup{
top: -.5em;
}
img{
border-style: none;
}
svg:not(:root){
overflow: hidden;
}
code,
kbd,
pre,
samp{
font-size: 1em;
font-family: monospace, monospace;
}
figure{
margin: 1em 40px;
}
hr{
overflow: visible;
box-sizing: content-box;
height: 0;
}
button,
input,
select,
textarea{
margin: 0;
font: inherit;
}
optgroup{
font-weight: bold;
}
button,
input{
overflow: visible;
}
button,
select{
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"]{
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{
padding: 0;
border-style: none;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{
outline: 1px dotted ButtonText;
}
fieldset{
margin: 0 2px;
padding: .35em .625em .75em;
border: 1px solid #c0c0c0;
}
legend{
display: table;
box-sizing: border-box;
padding: 0;
max-width: 100%;
color: inherit;
white-space: normal;
}
textarea{
overflow: auto;
}
[type="checkbox"],
[type="radio"]{
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
height: auto;
}
[type="search"]{
outline-offset: -2px;
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration{
-webkit-appearance: none;
}
::-webkit-input-placeholder{
color: inherit;
opacity: .54;
}
::-webkit-file-upload-button{
-webkit-appearance: button;
font: inherit;
}

/* Base
----------------------------------------------------------------- */
html{
font-size: 62.5%;
}
body{
background-color: #dcf1fc;
color: #333;
font-size: 1.4rem;
font-family: "Hiragino Kaku Gothic Pro W3", Meiryo, arial, helvetica, "ms pgothic", hirakakupro-w3, sans-serif;
line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5,
h6{
margin: 0 0 20px;
}
p{
margin: 0 0 10px;
}
ul{
padding: 0;
list-style-type: none;
}
ul > :last-child,
ol > :last-child,
dl > :last-child{
margin-bottom: 0;
}
dt,
dd{
margin: 0 0 10px;
}
a{
color: #0081bf;
}
a:hover,
a:active,
a:focus{
color: #00b2d8;
text-decoration: none;
}
em{
font-weight: bold;
font-style: normal;
}
img{
vertical-align: bottom;
}
strong{
color: #e01a04;
font-weight: normal;
}


/* ----------------------------------------------------------------
Structure
----------------------------------------------------------------- */

/* wrapper
----------------------------------------------------------------- */
.wrapper{
position: relative;
margin: 0 auto;
width: 760px;
background-color: #fff;
}

/* header
----------------------------------------------------------------- */
.header{
position: relative;
height: 90px;
background: url("/notificationMail/faces/jakarta.faces.resource/img/bg_header.png") 50% 0 no-repeat;
}
.header-title{
margin: 0;
width: 100%;
text-align: center;
}
.header-logo{
position: absolute;
top: 24px;
left: 20px;
}
.header-button{
position: absolute;
right: 10px;
bottom: -2px;
margin: 0;
}

/* container
----------------------------------------------------------------- */
.container{
padding: 20px;
}
.container .heading-01:first-child{
margin-top: 0;
}

/* footer
----------------------------------------------------------------- */
.footer{
margin: 10px 20px 0;
padding: 18px 0;
border-top: 1px solid #d9d9d9;
}
.footer-copy{
text-align: center;
letter-spacing: 0.5px;
font-size: 1.2rem;
}
.footer-copy small{
font-size: inherit;
}

/* ----------------------------------------------------------------
Object
----------------------------------------------------------------- */

/* Modules
----------------------------------------------------------------- */
/* heading */
.heading-01{
margin: 40px 0 16px;
padding: 7px 10px;
border-radius: 5px;
background-color: #0097d8;
color: #fff;
font-size: 1.7rem;
}

/* paragraph */
.lead-01{
margin-top: 60px;
margin-bottom: 35px;
text-align: center;
font-size: 1.6rem;
line-height: 1.8;
}
.lead-02{
margin-top: 60px;
margin-bottom: 35px;
text-align: left;
font-size: 1.6rem;
line-height: 1.8;
}
.paragraph-01{
margin-bottom: 15px;
padding: 0 10px;
}
.paragraph-check-01{
text-align: center;
font-size: 1.5rem;
}
.paragraph-check-01 input{
margin-right: 5px;
}

/* button */
.button-list-01{
margin: 35px 0;
text-align: center;
font-size: 0;
}
.button-list-01 li{
display: inline-block;
margin-left: 10px;
font-size: 1.4rem;
}
.button-list-01 li:first-child{
margin-left: 0;
}
.button-01,
.button-02{
display: inline-block;
box-sizing: border-box;
color: #fff;
text-align: center;
text-decoration: none;
}
.button-01{
padding: 12px;
width: 270px;
border-radius: 40px/50%;
letter-spacing: 1px;
font-weight: bold;
font-size: 1.8rem;
line-height: 1.4;
}
.button-01:active,
.button-01:hover,
.button-01:focus,
.button-02:active,
.button-02:hover,
.button-02:focus{
color: #fff;
}
.button-01.type-01,
.button-02.type-01{
background-color: #0097d8;
color: #fff;
}
.button-01.type-02,
.button-02.type-02{
background-color: #0c9b01;
color: #fff;
}
.button-01.is-disabled,
.button-02.is-disabled{
opacity: .25;
}
.button-02{
padding: 10px;
width: 200px;
border-radius: 20px/50%;
}

/* link */
.link-01{
display: inline-block;
text-decoration: none;
}
.link-01::before{
display: inline-block;
margin-right: 4px;
content: "";
vertical-align: middle;
}
.link-01.type-close{
font-size: 1.2rem;
}
.link-01.type-close::before{
width: 16px;
height: 16px;
background: url("/notificationMail/faces/jakarta.faces.resource/img/icon_link_02.png") 0 0 no-repeat;
}

/* nav */
.nav-top{
margin-bottom: 0;
text-align: right;
}
.nav-top a{
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
}
.nav-top a::before{
display: inline-block;
margin-top: -2px;
margin-right: 5px;
width: 15px;
height: 15px;
background: url("/notificationMail/faces/jakarta.faces.resource/img/icon_link_01.png") 0 0 no-repeat;
content: "";
vertical-align: middle;
}

/* box */
.box-01{
padding: 10px 20px;
border-radius: 5px;
background-color: #ededed;
font-size: 1.2rem;
}
.box-02{
box-sizing: border-box;
margin-bottom: 30px;
padding: 15px;
height: 200px;
border: 1px solid #e0e0e0;
border-radius: 5px;
}
.box-02 > ._inner{
overflow-y: auto;
height: 100%;
}

/* table */
.table-01{
margin-bottom: 20px;
width: 100%;
border-spacing: 0;
border-collapse: separate;
color: #222;
}
.table-01 th,
.table-01 thead td{
background-color: #efefef;
color: #2c2c2c;
font-weight: bold;
}
.table-01 th,
.table-01 td{
padding: 15px 10px;
border: solid #c1c1c1;
border-width: 0 1px 1px 0;
text-align: left;
line-height: 1.2;
}
.table-01 td{
padding: 15px;
color: #2c2c2c;
line-height: 1.5;
}
.table-01.type-input td{
padding: 15px 10px;
font-size: 1.2rem;
}
.table-01 tr:first-child > :first-child{
border-top-left-radius: 5px;
}
.table-01 tr:first-child > :last-child{
border-top-right-radius: 5px;
}
.table-01 tr:last-child > :first-child{
border-bottom-left-radius: 5px;
}
.table-01 tr:last-child > :last-child{
border-bottom-right-radius: 5px;
}
.table-01 tr:first-child > th,
.table-01 tr:first-child > td{
border-top-width: 1px;
border-top-color: #e0e0e0;
}
.table-01 tr > :first-child{
box-sizing: border-box;
width: 204px;
border-left-width: 1px;
border-left-color: #e0e0e0;
}
.table-01 tr:last-child > th,
.table-01 tr:last-child > td{
border-bottom-width: 1px;
border-bottom-color: #e0e0e0;
}
.table-01 tr > :last-child{
border-right-width: 1px;
border-right-color: #e0e0e0;
}

/* layout */
.layout-col2-01 ._col{
float: left;
margin-top: 45px;
margin-left: 5.2%;
width: 47.4%;
}
.layout-col2-01 ._col:nth-child(2n+1){
margin-left: 0;
}
.layout-col2-01 ._col:nth-child(-n+2){
margin-top: 0;
}
.layout-image-01 ._image{
display: table;
}
.layout-image-01.type-right ._image{
float: right;
margin-left: 15px;
}
.layout-image-01.type-left ._image{
float: left;
margin-right: 15px;
}
.layout-image-01 ._caption{
display: table-caption;
margin: 10px 0 0;
caption-side: bottom;
font-size: 1.3rem;
}
.layout-image-01 ._content{
overflow: hidden;
}
.layout-image-01 ._content > :last-child{
margin-bottom: 0;
}

/* input */
.input-01{
box-sizing: border-box;
padding: 5px;
width: 225px;
border: 1px solid #ccc;
}
.input-01.type-01{
width: 156px;
}
.input-01.type-02{
width: 335px;
}

/* Utility
----------------------------------------------------------------- */

/* margin */
.mt-0{
margin-top: 0 !important;
}
.mt-10{
margin-top: 10px !important;
}
.mt-15{
margin-top: 15px !important;
}
.mt-20{
margin-top: 20px !important;
}
.mt-25{
margin-top: 25px !important;
}
.mt-40{
margin-top: 40px !important;
}
.mb-0{
margin-bottom: 0 !important;
}
.mb-10{
margin-bottom: 10px !important;
}
.mb-20{
margin-bottom: 20px !important;
}
.mb-40{
margin-bottom: 40px !important;
}

/* text-align */
.ta-c{
text-align: center !important;
}
.ta-l{
text-align: left !important;
}
.ta-r{
text-align: right !important;
}

/* font-size */
.fz-14{
font-size: 1.4rem;
}

/* clearfix */
.layout-image-01::after{
display: block;
clear: both;
content: "";
}