@charset "UTF-8";
/* PCサイズでのみ表示する */
@media (max-width: 768px) {
    .pc {
        display: none;
    }
}
/* モバイルサイズでのみ表示する */
@media (min-width: 769px) {
    .mb {
        display: none;
    }
}
/**********************
main page
**********************/
main {
      padding-top: 80px;
}
main .heading-div {
    padding-top: 38px;
    padding-bottom: 38px;
	margin-top: 38px;
    border-top:0.75px solid #c7c7c7;
}
main .NotHasSubsectionMenu {
    border-bottom: 0.75px solid #c7c7c7;
    margin-bottom: 38px;
    padding-bottom: 38px;
}
main h2 {
    font-size:28px;
    width: 100%;
    padding-right: 143px;
		font-weight:bold;
}
main h3 {
    font-size: 21px;
    line-height: 1.5em;
    /* メインページ上部の目次リンクからジャンプ時に、ヘッダ分下げた位置へ表示するため */
    margin-top: -110px;
    padding-top: 110px;
}
main p {
    line-height: 1.5em;
    margin: 0 0 13px 0;
}
main a {
    font-size: 14px;
    color:#4470ae;
}
.CrossReference, .Hyperlink {
    font-size: inherit;
    font-family: inherit;
}
main a:visited {
    color:#4470ae;
}
main a:hover {
    color:#4ca5ff;
    text-decoration:none;
}
main hr {
    margin:30px 0 30px 0;
    color:#bfc0c2;
}
main .Superscript {
    font-size:60%; 
}

main .Subscript {
    font-size:60%; 
}
/**********************
Subsection
**********************/
.Subsection-menu {
    margin:21px 0 0 0;
    padding-left:14px;
    border-left:5.5px solid #4470ae;
}
.Subsection-item {
    margin:11px 0 0.11px 0;
}

/**********************
List
**********************/
main .img-graphic-inline {
    margin:0 0.2em 0 0.2em;
    vertical-align: middle;
}

/**********************
List
**********************/
main .List {
    margin-bottom: 21px;
}
main .List-Safety-Numbered {
    margin:0 0 0 3em;
}
main .List-Safety-Numbered > li {
    list-style-type:decimal;
    line-height: 1.5em;
}
main .List-Safety-Bulleted {
    margin:0 0 0 3em;
}
main .List-Safety-Bulleted > li {
    list-style-image: url(../img/bullet_shikaku.png);
    line-height: 1.5em;
}
main .Sublist {
    margin:0 0 0 2em;
}
main .Sublist > li {
    list-style-image: url(../img/bullet_sankaku.png);
    line-height: 1.5em;
}
main .inList{
    margin: 0;
}

/**********************
SequenceOfActionOrientation
**********************/
main .SequenceOfAction-column {
    counter-reset:number;
    margin-bottom:2em;
}
main .SequenceOfAction-row{
    display:flex;
		display: -webkit-flex;
    flex-wrap:wrap;
		-webkit-flex-wrap: wrap;
    margin-top: 38px;
}
main .heading-div + .SequenceOfAction-row{
    margin-top: 0;
}
main .SequenceOfAction-item {
    padding-bottom: 21px;
}
main .SequenceOfAction-column .SequenceOfAction-item:last-child {
    padding-bottom: 24px;
}
main .SequenceOfAction-item.bottom-border {
    border-bottom:0.75px dashed #cbcbcb;
}
main .SequenceOfAction-item.right-space {
    padding-right: 14px;
}
main .SequenceOfAction-column .SequenceOfAction-item-num-div {
    text-align: center;
    font-size: 21px;
    width: 2.3em;
    padding: 0.4em;
    margin-bottom: 21px;
    font-family: Helvetica;
    font-weight: bold;
}
.pp main .SequenceOfAction-column .SequenceOfAction-item-num-div {
    color: #818181;
    background-color: #eeeeee;
}
.op main .SequenceOfAction-column .SequenceOfAction-item-num-div {
    color: #fafafa;
    background-color: #c8c8c8;
}
main .SequenceOfAction-column .SequenceOfAction-item {
    margin-top: 38px;
}
main .heading-div + .SequenceOfAction-column .SequenceOfAction-item:first-of-type {
    margin-top: 0;
}

main .Counter-flex .column .iframe_div {
    position: relative;
    height: 0;
    padding-bottom: 56.25%; /* 幅に対するパーセント値によるパディングの寸法。縦横比16:9(1:0.5625)に合わせて、横幅に対して56.25%の高さを確保する */
}

main .Counter-flex .column .iframe_div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

main .SequenceOfAction-row .SequenceOfAction-item-num-div {
    font-size: 28px;
    font-weight: bold;
    color: #5F5F5F;
    width: 2.3em;
    padding-bottom: 7px;
    line-height: 1em;
}
.SequenceOfAction-row-div:first-of-type{
    margin-left:0;
}

main .SequenceOfAction-row .iframe_div {
    position: relative;
    padding-top: 56.25%; /* 幅に対するパーセント値によるパディングの寸法。縦横比16:9(1:0.5625)に合わせて、横幅に対して56.25%の高さを確保する */
}

main .SequenceOfAction-row .iframe_div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

@media screen and (min-width: 0px) and (max-width:639px) {
    .SequenceOfAction-row-div{
    width:100%;
}
}
@media screen and (min-width: 640px) and (max-width:1023px) {
    .SequenceOfAction-row-div{
    width:calc(99%/2);
}
.SequenceOfAction-row-div:nth-of-type(2n+1){
    margin-left:0;
}
}
@media screen and (min-width: 1024px) and (max-width:1471px) {
    .SequenceOfAction-row-div{
    width:calc(99%/3);
}
.SequenceOfAction-row-div:nth-of-type(3n+1){
    margin-left:0;
}
}
@media screen and (min-width: 1472px) and (max-width:1919px) {
    .SequenceOfAction-row-div{
    width:calc(99%/4);
    }
    .SequenceOfAction-row-div:nth-of-type(4n+1){
        margin-left:0;
    }
}
@media screen and (min-width: 1920px){
    .SequenceOfAction-row-div{
        width:calc(99%/5);
    }
    .SequenceOfAction-row-div:nth-of-type(5n+1){
        margin-left:0;
    }
}
/**********************
image
**********************/
main .img-graphic-inRow {
    max-width: 100%;
	vertical-align: middle;
}
main .img-block {
    margin-bottom: 14px;
}
main .img-graphic {
    max-width: 100%;
    vertical-align: middle;
}

main .img-graphic-media {
    width: 90%;
    vertical-align: middle;
}

/**********************
align, valign
**********************/
main .align-left {
    text-align: left;
}
main .align-center {
    text-align: center;
}
main .align-right {
    text-align: right;
}
main .valign-top {
    vertical-align: top;
}
main .valign-middle {
    vertical-align: middle;
}
main .valign-bottom {
    vertical-align: bottom;
}

/**********************
Table
**********************/
main .table-title{
    font-weight: bold;
}
main Table {
    width:100%;
    border-top:0.5px solid #646464;
    border-left:0.5px solid #646464;
    border-collapse:collapse;
    border-spacing:0;
}
main Table thead{
    text-align: center;    
}
main Table tbody{
    text-align: center;    
}
main Table tr{
    text-align: center;    
}
main Table th {
    height: 42px;
}
.pp main Table th {
    background-color:#dcdcdc;
}
.op main Table th {
    background-color:#e6e6e6;
}
main Table th p{
    margin:0;
    padding:0;
}
main Table td, main Table th {
    border-bottom: 0.5px solid #646464;
    border-right: 0.5px solid #646464;
    padding:0 22px;
    vertical-align: middle;
    text-align: left;
}
main .td-th-div {
    margin:14px 0 14px;
}
main .Table-wrapper {
    overflow-x:auto;
    margin-top:14px; /* 表組みの上部に14pxのアキ */
    margin-bottom: 38px;
}
/* Table内のListEntry要素は箇条書きと同等のスタイルをつける */
main .table-listentry {
    list-style-image: url(../img/bullet_shikaku.png);
    padding-left: 22px;
    margin: 14px 0 14px 0;
}

/**********************
Safety
**********************/
main .SafetyAdvice {
    border-top: solid 2px #c8c8c8;
    border-bottom: solid 2px #c8c8c8;
    margin: 14px 0 14px 0;
    padding: 10px 0 10px 0;
}
main .Safety-title {
    font-size:20.5px;
    font-weight:bold;
}
main .Safety-title:before {
position: relative;
    top: 2px;
    left: 0px;
    content: url(../img/Safety.png);
    margin-right: 5px;
}
main .Safety-action-li {
    list-style-image: url(../img/bullet_shikaku.png);
    margin-left: 4em;
    font-weight:bold;    
    line-height: 1.5em;
}

/**********************
safety_condition
**********************/
main .safety_condition {
  padding:0 3em 0 3em;
}
/**********************
PropertyDamageMessage
**********************/
main .PropertyDamageMessage {
    margin:14px 0 14px 0;
    padding:4px 0 18px 4px;
    border: 0.3px solid #c7c7c7;
    box-shadow: -1px 4px 0px -1px #f5f5f5;
}
main .PropertyDamageMessageTitle-div {
    position:relative;    
}
main .PropertyDamageMessage-title{
    font-size:14px;
    font-weight:bold;
    color:#8D1D22;
    position: absolute;
    top: calc(18px - 4px);  /* 指定された上アキ-枠内側に指定された上アキ */
    left:calc(36px + 4px); /* 画像の横幅+左アキ */
}
main .PropertyDamageMessage-body {
    padding:0 3em 0 1.5em;
}
main .SequenceOfAction-row .PropertyDamageMessage, .SequenceOfAction-column .PropertyDamageMessage {
    margin: 38px 0 21px 0;
}
/**********************
Tips
**********************/
main .Tips {
    margin:14px 0 14px 0;
    padding:4px 0 18px 4px;
    border: 0.3px solid #c7c7c7;
    box-shadow: -1px 4px 0px -1px #f5f5f5;
}
main .TipsTitle-div {
    position:relative;    
}
main .Tips-title {
    font-size:14px;
    font-weight:bold;
    color:#004D6D;
    position: absolute;
    top: calc(18px - 4px);  /* 指定された上アキ-枠内側に指定された上アキ */
    left:calc(36px + 4px); /* 画像の横幅+左アキ */
}
main .Tips-body {
    padding:0 3em 0 1.5em;
}
/**********************
Reference
**********************/
main .Reference {
    margin:14px 0 14px 0;
    padding:4px 0 18px 4px;
    border: 0.3px solid #c7c7c7;
    box-shadow: -1px 4px 0px -1px #f5f5f5;
}
main .ReferenceTitle-div {
    position:relative;    
}
main .Reference-title {
    font-size:14px;
    font-weight:bold;
    color:#25528C;
    position: absolute;
    top: calc(18px - 4px);  /* 指定された上アキ-枠内側に指定された上アキ */
    left:calc(36px + 6px); /* 画像の横幅+左アキ */
}
main .Reference-body {
    padding: 0 3em 0 3.5em;
}
main .List-Reference-Bulleted {
    margin:0 0 0 1em;
}
main .List-Reference-Bulleted li{
    list-style-image: url(../img/bullet_shikaku.png);
    line-height: 1.5em;
}
/**********************
RelatedSetting
**********************/
main .RelatedSetting {
    margin:14px 0 14px 0;
    padding:4px 0 18px 4px;
    border: 0.3px solid #c7c7c7;
    box-shadow: -1px 4px 0px -1px #f5f5f5;
}
main .RelatedSettingTitle-div {
    position:relative;
}
main .RelatedSetting-title {
    font-size:14px;
    font-weight:bold;
    color:#661773;
    position: absolute;
    top: calc(18px - 4px);  /* 指定された上アキ-枠内側に指定された上アキ */
    left:calc(36px + 4px); /* 画像の横幅+左アキ */
}
main .RelatedSetting-body {
    padding:0 3em 0 1.5em;
}
/**********************
Symbol
**********************/
.span-symbol {
    font-family:"KM-Symbolnew";
    font-size: inherit;
}
@font-face {
    font-family: KM-Symbolnew;
    src:url('../fonts/KM-Symbolnew.eot?') format('eot'), 
    url('../fonts/KM-Symbolnew.woff') format('woff'), 
    url('../fonts/KM-Symbolnew.ttf') format('truetype');
}
/**********************
Orientation
**********************/
main .Orientation {
    line-height: 1.5em;
    position: relative;
}
.pp main .Orientation {
    padding-left: 2em;
}
.pp main .Orientation:before {
    content:url(../img/Orientation.png);
    position: absolute;
    top: 0;
    left: 0;
}
/**********************
Prerequisite
**********************/
main div.Prerequisite:first-child {
    margin-top: 14px;
}
main .Prerequisite {
    line-height: 1.5em;
    position: relative;
    padding-left: 2em;
}
main .Prerequisite:before {
    content:url(../img/Prerequisite.png);
    position: absolute;
    top: 0;
    left: 0;
}
/**********************
Alternative
**********************/
main .Alternative {
    margin-left: 2em;
    margin-bottom: 21px;
}
.pp main .Alternative {
    list-style-image: url(../img/Alternative-Action.png);
}
.op main .Alternative {
    /* OPでは、Alternativeは従来通り矢印にする。画像はPPと共通のため、Orientation.pngを使用する */
    list-style-image: url(../img/Orientation.png);
}
/**********************
FCounter
**********************/
main .FCounter {
    padding:1em 0 1em 0;
    border:1px solid #c7c7c7;
}
main .FCounter-arrow-wrapper {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    height: 46px;
}

main .FCounter-arrow {
    width: 41px;
    height: 27px;
    background: url(../img/Step_yajirushi.png);
}
/**********************
FAction
**********************/
main .FAction-step-count {
    width:90px;
    font-size:16px;
    font-weight:bold;
    padding-left:10px;
    color:#00557E;
    float:left;
}
main .FAction {
    font-size:16px;
    font-weight: bold;
    margin-left: 90px;
}
main .SubActionIntro {
    margin:1em 0 1em 90px;
    font-weight: bold;
}
main .Supplementary {
    margin:1em 0 1em 100px;
}
main .clearfix:after{
    content: "";
    clear: both;
    display: block;
}
/**********************
    SequenceOfAction
**********************/
main .SequenceOfAction-column .Counter-Action {
    font-size: 15.4px;
    margin-bottom: 21px;
    line-height: 1.5em;
}
main .SequenceOfAction-row .Counter-Action {
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 21px;
}
main .SequenceOfAction-column .Result, .SequenceOfAction-row .Result {
    margin-bottom: 0;
}
main .SequenceOfAction-column .FirstResult, .SequenceOfAction-row .FirstResult {
    margin-top: 21px;
}
main .SequenceOfAction-column .LastResult, .SequenceOfAction-row .LastResult {
    margin-bottom: 21px;
}
/**********************
Media
**********************/
main .MediaSupplementHeading {
    font-weight: bold;
    font-size:14px;
    margin-bottom: 14px;
}
main .MediaSupplementListEntry .List-Safety-Bulleted > li {
    list-style-image: url(../img/bullet_ten.png);
}
/* MediaSupplementHeadingと次要素の間は14px */
main .MediaSupplementListEntry .MediaSupplementHeading + *{
  margin-top: 14px;
}
/* メディアブロック内動画の場合、下部に余白を持つ（画像の場合の余白に揃える） */
.mediablock-movie  {
    margin-bottom: 14px;
}
/* Vimeo用iframeのレスポンシブ対応 */
main .Media-flex .column .iframe_div {
    position: relative;
    height: 0;
    padding-bottom: 56.25%; /* 幅に対するパーセント値によるパディングの寸法。縦横比16:9(1:0.5625)に合わせて、横幅に対して56.25%の高さを確保する */
}

main .Media-flex .column .iframe_div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
/**********************
pc
**********************/
@media (min-width:769px) {
    /**********************
    SequenceOfAction
    **********************/
    main .Counter-flex {
        display:flex;
    }
    main .Counter-flex .column {
        flex:1 1 0px; /* IE対策 flex-basisに単位指定 */
    }
    main .Counter-flex .column:nth-child(2) {
        padding-left: 38px;
    }
    main .Counter-flex .column .Counter-Action:first-child .img-block {
        display: none;
    }
    main .Counter-flex .no-graphic-counter {
        padding: 0 1em 0 1em;
    }
    /**********************
    Media
    **********************/
    main .Media-flex {
        display:flex;
    }
    main .Media-flex .column {
        flex:1 1 0px; /* IE対策 flex-basisに単位指定 */
    }
    main .Media-flex .column:nth-child(2) {
        padding-left: 20px;
    }

    main .MediaSupplementListEntry:not(:last-child) {
        margin-block-end: 38px;
    }
}
/**********************
mobile
**********************/
@media (max-width:768px) {
	/* mainタグはパンくずリストの下（タイトル以下）を包括するが、レイアウト仕様書では
    モバイル表示の場合、タイトルの左アキは8pxが指定されているため、タイトルでは左に-2pxする必要がある */
	main h2 {
        margin-left:-2px;
        padding-right: 0px;
	}
    /**********************
    Table
    **********************/
    main Table {
        width:600px;
    }

    /**********************
    image
    **********************/
    main .img-graphic {
        max-width:100%;
    }
    main .img-graphic-inline {
        width:auto;
    }

    /**********************
    SequenceOfAction
    **********************/
    main .Counter-flex .column:first-child .img-block {
        margin-top: 14px;
    }
    /**********************
    Media
    **********************/
    main .MediaSupplementListEntry:not(:last-child) {
        margin-block-end: 21px;
    }
}

/**********************
Safari6-10
**********************/
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ @media {
    main .heading-div {
        border-top:1px solid #c7c7c7;
    }

    main .NotHasSubsectionMenu {
        border-bottom: 1px solid #c7c7c7;
    }

    main .SequenceOfAction-item.bottom-border {
        border-bottom: 1px dashed #cbcbcb;
    }

    main Table {
        border-top:1px solid #646464;
        border-left:1px solid #646464;
    }

    main Table td, main Table th {
        border-right:1px solid #646464;
        border-bottom:1px solid #646464;
    }

    main .PropertyDamageMessage {
        border: 1px solid #c7c7c7;
    }

    main .Tips {
        border: 1px solid #c7c7c7;
    }

    main .Reference {
        border: 1px solid #c7c7c7;
    }

    main .RelatedSetting {
        border: 1px solid #c7c7c7;
    }
}}


/**********************
IPhone + Safari
**********************/
@media (max-width:768px) and (-webkit-min-device-pixel-ratio: 0){
    _::-webkit-full-page-media, _:future, :root main .heading-div {
        border-top:1px solid #c7c7c7;
    }

    _::-webkit-full-page-media, _:future, :root main .NotHasSubsectionMenu {
        border-bottom: 1px solid #c7c7c7;
    }

    _::-webkit-full-page-media, _:future, :root main .SequenceOfAction-item.bottom-border {
        border-bottom: 1px dashed #cbcbcb;
    }

    _::-webkit-full-page-media, _:future, :root main Table {
        border-top:1px solid #646464;
        border-left:1px solid #646464;
    }

    _::-webkit-full-page-media, _:future, :root main Table td, main Table th {
        border-right:1px solid #646464;
        border-bottom:1px solid #646464;
    }

    _::-webkit-full-page-media, _:future, :root main .PropertyDamageMessage {
        border: 1px solid #c7c7c7;
    }

    _::-webkit-full-page-media, _:future, :root main .Tips {
        border: 1px solid #c7c7c7;
    }

    _::-webkit-full-page-media, _:future, :root main .Reference {
        border: 1px solid #c7c7c7;
    }

    _::-webkit-full-page-media, _:future, :root main .RelatedSetting {
        border: 1px solid #c7c7c7;
    }
}

/**********************
画像検索
**********************/
@media (max-width: 768px) {
    .illustSearchIntro {
        margin-right: 25px;
    }
}

@media (min-width: 769px) {
    .illustBoxArea {
        display: flex;
        flex-wrap: wrap;
        margin-top: 38px;
        margin-right: -12px; /* BOX同士の間隔と同値。最右列のBOXは右余白なしとするため。 */
    }
}
@media (max-width: 768px) {
    .illustBoxArea {
        margin-right: 25px;
    }
}

.illustBox {
    border: 2px solid #efefef;
    position: relative;
    box-sizing: border-box;
    transition-duration: 0.2s;
}
@media (min-width: 769px) {
    .illustBox {
        width: 200px;
        height: 200px;
        margin: 0 12px 30px 0;
    }
}
@media (max-width: 768px) {
    .illustBox {
        width: 100%;
        margin-bottom: 20px;
    }
}

.illustBox:hover {
    border-color: transparent;
    background-color: rgba(0,125,168,0.1);
    transition-duration: 0.2s;
}

.illustBoxText {
    font-weight: bold;
}
@media (min-width: 769px) {
    .illustBoxText {
        margin: 10px 10px 0;
    }
}
@media (max-width: 768px) {
    .illustBoxText {
        margin: 15px 15px 0;
    }
}

.illustBoxImg {
    display: block;
}
@media (min-width: 769px) {
    .illustBoxImg {
        width: 180px;
        position: absolute;
        bottom: 0px;
        margin-top: 20px;
        margin-left: 8px; /* .illustBoxの罫線分の余白を少なくした */
        margin-right: 8px; /* .illustBoxの罫線分の余白を少なくした */
    }
    .SO .illustBoxImg{
        margin-bottom: 20px;
    }
    .SF .illustBoxImg{
        margin-bottom: 15px;
    }
}
@media (max-width: 768px) {
    .illustBoxImg {
        width: calc(100% - 15px - 15px); /* 左右余白分をマイナスする */
        margin: 30px 15px 15px;
    }
}

.illustLink {
    /* .illustBox全体を覆う */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}