@charset "UTF-8";
/*スタイガイド仕様　修正*/
.SPHeaderMenu {
    z-index: 16000; /* サイドパネル以上の要素（10000-99999：1の位は切り捨て）*/
}

.Section--BorderNone {
    border: none;
}

/*パンくずリスト*/
@media screen and (max-width: 768px) {
/*PCスタイルガイドから流用*/
    .BreadCrumbs {
        list-style: none;
        padding: 0;
        line-height: 1.5;
    }
    
    .BreadCrumbs__CategoryName {
        white-space: nowrap;
        display: inline-block;
    }

    .BreadCrumbs__CategoryName::before {
        font-family: "monotaroIcon";
        content: "\e91b";
        padding: 0 4px;
    }

    .BreadCrumbs__CategoryName:first-child::before {
        content: "";
        padding: 0;
    }

    .BreadCrumbs__CategoryName--Md {
        font-size: 13px;
    }

    .BreadCrumbs__CategoryName--Md::before {
        content: "";
        font-size: 12px;
    }
}

/*ユーティリティクラス*/
.u-MarginBottom--8 {
    margin-bottom: 8px;
}

.u-Width--100per {
    width: 100%;
}

.u-PaddingBottom--8 {
    padding-bottom: 8px;
}

.u-WhitespaceNowrap {
    white-space: nowrap;
}



/* Header(タイトル部分)　**********************************/
.HeaderBox {
    width: auto;
    height: 230px;
    background-image: url("//jp.images-monotaro.com/topic/transceiver/img/transceiver-top_pc.png");
    background-repeat: no-repeat;
    background-position: center;
    border-top: 1px #ccc solid;
    margin-top: 8px;
}
.Header {
    position: relative;
    width: 750px;
    margin: 0 auto;
}
.HeaderMark {
    position: absolute;
    top: 64px;
    width: 120px;
	height: 120px;
    padding: 12px;
	border-radius: 50%;
    background-color: #FCF041;
    display: table;
}
.HeaderMark__Text {
    font-size: 22px; 
    line-height: 1.3;
    font-weight: bold;
    display: block;
    text-align: center;
    margin-top: 24px;
}
.Header__Title {
    position: absolute;
    top: 64px;
    left: 152px;
    margin: 0;
    color: #333;
    font-size: 38px;
    line-height: 1.3;
    font-weight: bold;

}
.Header__Explanation {
    position: absolute;
    top: 134px;
    left: 152px;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

/*　Gnavi　**********************************/
.GlobalNaviListPosition {
    position: relative;
}
.GlobalNaviListBox {
    width:100%;
    position: absolute;
    background-color: #F3F3F3;
    padding: 8px;
    margin-bottom: 64px;
}
.GlobalNaviList {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border: none;
    justify-content: space-between;
    display: flex;
}
.GlobalNaviList__Item {
    width: calc((100% - 24px) / 4);
    display: table;
    position: relative;
}
.GlobalNaviList__Link {
    display: block;
    color: #333;
    font-size: 15px;
    line-height: 1.3;
    height: 63px;
    text-decoration: none;
    border: solid 1px #666;
    background-color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.GlobalNaviList__Link:hover {
    color: #312A53;
    opacity: 0.6;
}
.GlobalNaviList__Link::after {
    font-family: "monotaroIcon";
    content: "\e92d";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%);
    font-size: 13px;
}
.GlobalNaviList__Link--2lines {
    padding-bottom:8px;
}

/*　GNavi固定用　*/
.GlobalNaviListBox--Fixed {
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* ArticleContents より後の部分　**********************************/
.ArticleContents {
    top: 144px;
    position: relative;
}


/* コンテンツ共通 ************************/
.TransceiverTitle {
    width: 100%;
    font-size: 36px;
    font-weight: bold;
    margin: 48px auto;
    text-align: center;
    display: inline-block;
}
.Explanation {
    font-size: 22px;
    font-weight: bold;
}
.SubTitle {
    font-size: 22px;
    font-weight: bold;
    height: 64px;
    vertical-align: top;
    background-image: url("//jp.images-monotaro.com/topic/transceiver/img/transceiver_subtitle_bottom.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    margin: 0 auto;
    text-align: center;
}
.SubTitle--White {
    background-image: url("//jp.images-monotaro.com/topic/transceiver/img/transceiver_subtitle_bottom_white.png");
}
/* PCとSP表示切替 **********/
.SpOnly {
    display: none;
}
.PcOnly {
    display: inline;
}

/*************** Introduction ***************/
.Introduction {
    position: relative;
}
.Problem {
    width: 770px;
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 50px;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
}
.Problem__Image {
    width: 217px;
    height: 210px;
}
.ProblemList {
    width: auto;
    margin: 0 0 24px;
}
.Proposal {
    background-color: #17437D;
    background-image: url("//jp.images-monotaro.com/topic/transceiver/img/transceiver_middle_back.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 472px;
    clip-path: polygon(50% 63%, 100% 10%, 100% 100%, 0 100%, 0 10%);
    position: relative;
}
.Proposal__Text {
    color: #FFF;
    position: absolute;
    bottom: 56px;
    text-align: center;
    width: 100%;
    line-height: 1;
    font-size: 36px;
    font-weight: bold;
}
.Proposal__Text--Small {
    color: #FFF;
    position: absolute;
    bottom: 116px;
    text-align: center;
    font-weight: bold;
    width: 100%;
    line-height: 1;
    font-size: 24px;
    font-weight: normal;
}
.ProblemList__Article {
    font-size: 22px;
    line-height: 1.5;
    font-weight: bold;
    margin: 0 0 32px; 
}
.ProblemList__Check {
    font-size: 19px;
    margin: 0;
}
.ProblemList__Check::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url("//jp.images-monotaro.com/topic/transceiver/img/transceiver_icon_check.png") no-repeat;
    background-size: contain;
    background-position: 0 4px;
}
.AboutTransceiver {
    width: 100%;
    border-top: 1px solid #D5EBFF;
    background-color: #D5EBFF;
    position: relative;
    padding: 0 0 48px;
}


/*************** 免許局トランシーバー***************/
.Transceiver {
    width: 750px;
    padding: 0 24px;
    margin: 0 auto 32px;
    position: relative;
}
.Transceiver::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -180px;
    display: inline-block;
    width: 120px;
    height: 421px;
    background-image: url(//jp.images-monotaro.com/topic/transceiver/img/transceiver_item_left.png);
    background-repeat: no-repeat;
    background-size: cover;
    }
.Transceiver::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -180px;
    display: inline-block;
    width: 120px;
    height: 421px;
    background-image: url(//jp.images-monotaro.com/topic/transceiver/img/transceiver_item_right.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover;
}
.TransceiverList {
    padding: 0;
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.5;
}
.TransceiverList__Item {
    list-style-type: none;
    position: relative;
    padding-left: 16px;
    line-height: 1.5;
    margin: 8px 0 0;
}
.TransceiverList__Item::before {
    content: "";
    border-radius: 50%; 
    width: 2px;
    height: 2px;
    display: block;
    position: absolute;
    left: 4px;
    top: 8px;
    background: #333; 
}
.HowTransceiver {
    max-width: 1140px;
    padding: 32px 32px 48px;
    margin: 0 auto;
    background: #fff;
}
.HowList {
    width: 100%;
    margin: 30px 0 0;
    padding: 0;
    display: flex;
    list-style: none;
    justify-content: space-between;
}
.HowList__Item {
    width: calc((100% - 40px) / 4);
}
.HowList__Image {
    height: 162px;
    width: 230px;
    display: block; 
    position: absolute;
    bottom: 4px;
    left: 4px;
}
.HowList__Line {
    position: relative;
    display: block;
    border-bottom: 4px #ccc solid;
    border-left: 4px #ccc solid;
    height: 154px;
    width: 222px;
    margin-bottom: 8px;
}
.HowList__Text {
    width: 252px;
    display: block;
}
.AnalogUser {
    width:750px;
    background-color: #F3F3F3;
    border-radius: 16px;
    padding: 16px 24px 11px 102px;
    background-image: url("//jp.images-monotaro.com/topic/transceiver/img/transceiver_analog_to_digital_image.png");
    background-size: 87px 69px;
    background-repeat: no-repeat;
    background-position: bottom 8px left 8px;
    margin: 32px auto;
}
.AnalogUser__Title {
    font-size: 19px;
    line-height: 1;
    font-weight: bold;
}
.AnalogUser__Text {
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 0;
}
.AnalogUser__Text--Bold {
    font-weight: bold;
}

/* 免許局と他の比較表 ************/
.Table--Plan {
    width: 750px;
    margin: 32px auto 16px;
    font-size: 15px;
    text-align: center;
}
.Table__HeadCell--Plan {
    border-bottom: 1px solid #b3b3b3;
    text-align: center;
    font-weight: normal;
}
.Table__HeadCell--Emphasis {
    font-size: 22px;
    line-height: 1;
    background-color: #FCF041;
    border-left: 2px solid #FF6F00;
    border-right: 2px solid #FF6F00;
    color: #333;
    font-weight: bold;
}
.Table__TbodyCell--Emphasis {
    background-color: #FFFEE9;
    border-left: 2px solid #FF6F00;
    border-right: 2px solid #FF6F00;
    color: #C15100;
    font-weight: bold;
}
.Table__TbodyCell--Left {
    text-align: left;
    height: 53px;
    padding-left: 8px;
}
.PlanTable {
    font-weight: normal;
    font-size: 13px;
}
.PlanTable--Emphasis {
    font-size: 22px;
}
.Table__Text {
    font-weight: normal;
    font-size: 13px;
}
.TableRepletion {
    width: 750px;
    margin: 0 auto;
}
.TableRepletion__Text {
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 0;
}

/*************** モノタロウでの免許局の登録申請について***************/
.TransceiverTitle--Registration  {
    margin: 48px auto 4px;
}
/*********** 解決***********/

.Solution {
    width: 750px;
    margin: 0 auto;
    position: relative;
}
.Solution__Explanation {
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    background-image: url("//jp.images-monotaro.com/topic/transceiver/img/transceiver_trouble_image.png");
    background-repeat: no-repeat;
    background-position: right 0 top 4px;
    height: 160px;
    width: 710px;
    padding: 32px 16px 0;
    margin: 0 auto;
}
.Solution__Title {
    width: 704px;
    height: 124px;
    font-size: 22px;
    font-weight: bold;
    background-image: url(//jp.images-monotaro.com/topic/transceiver/img/transceiver_solution_title_back_pc.png);
    background-position: left 32px top 0;
    background-repeat: no-repeat;
    background-size: auto;
    margin: 16px auto 0;
    padding: 46px 0 0 40px;
    text-align: center;
}

.SolutionList {
    width: 708px;
    margin: 0 auto;
    display: flex;
    padding: 0;
}
.SolutionPoint {
    list-style: none;
    width: 354px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 32px 0 0;
}
.SolutionPoint:last-child {
    margin-left: 16px;
}
.SolutionPoint__Part {
    width: 100%;
    font-size: 19px;
    font-weight: bold;
    background-color: #FCF041;
    clip-path: polygon(3% 0, 100% 0%, 97% 100%, 0% 100%);
    text-align: center;
    padding: 8px;
    margin-bottom: 8px;
 }
 .SolutionPoint__ImageBox {
     width: 120px;
     margin-right: 8px;
     margin-left: 8px;
 }
 .SolutionPoint__Text {
     width: 190px;
     font-size: 15px;
     line-height: 1.5;
     margin: 0;
 }
.SolutionPoint__Image {
    width: 120px;
    height: auto;
}


/*********** ご購入、利用開始までの流れ***********/
.Flow {
    max-width: 1140px;
    background-color: #D5EBFF;
    padding: 32px 24px;
    border-radius: 16px;
    margin: 32px auto 0;
    position: relative;
}
.FlowList {
    display: flex;
    width: 1092px;
    margin-top: 56px;
    padding: 0;
    justify-content: space-around;
}
.FlowList__Item {
    width: 200px;
    padding: 52px 16px 16px 16px;
    background: #fff;
    list-style-type: none;
    font-size: 13px;
    line-height: 1.5;
    position: relative;
    display: block;
    text-align: center;
}
.FlowList__Item::after {
    content: "";
    width: 30px;
    height: 30px;
    clip-path: polygon(0 2%, 0 100%, 56% 52%);
    background: #005AC1;
    position: absolute;
    top: 44%;
    right: -30px;
}
.FlowList__Item--Last::after {
    content: "";
    width: 0;
    margin-right: 0;
}
.FlowList__Icon {
    font-size: 50px;
    margin-top: 16px;
    color: #3399FF;
}
.FlowList__Title {
    font-weight: bold;
    font-size: 15px;
    margin: 0 0 16px;
    line-height: 1;
}
.FlowList__Image {
    margin-top: 16px;
}
.FlowList__Text {
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    margin: 16px 0 0 ;
}

/*** STEP1~5アイコン部分***/
.StepIcon {
    background: #005AC1;    
    border-radius: 50%;
    width: 58px;
    height: 58px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.StepIcon__Text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    margin-top: 4px;    
}
.StepIcon__Number {
    font-size: 22px;
    line-height: 1.3;
}

/*************** サービス対象商品 ***************/
.ProductBox {
    background: #FFFEE9;
    width: 100%;
    margin: 48px 0;
    padding: 0 0 48px;
}
.Product {
    width: 824px;
    margin: 0 auto;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0;
    justify-content: space-between;
}
.Product--TwoItem {
    margin: 48px auto 0;
    justify-content: flex-start;
}
.Product__List {
    width: auto;
}
.Product__List--TwoItem {
    margin-right: 48px;
}
.Product__Link {
    color: #333;
}
.Product__Link:hover {
    opacity: 0.6;
}
.Product__ImageBox {
    width: 240px;
    height: 192px;
    border: solid 1px #E6E6E6;
    background: #fff;
    padding: 16px 0;
}
.Product__Image {
    width: 160px;
    height: 160px;
    display: block;
    margin: 0 auto;
}
.Product__Info {
    width: 240px;
}
.Product__Name {
    display: block;
    font-size: 15px;
    line-height: 1.3;
    font-weight: bold;
    margin: 8px 0 0;
    height: 38px;
    overflow: hidden;
}
.Product__Brand, .Product__Point {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0;
    display: block;
}
.Product__PriceBox {
    display: flex;
    margin: 8px 0 0;
}
.Product__Price {
    font-size: 19px;
    color: #DF0011;
    font-weight: bold;
    margin-right: 8px;
}
.Product__PriceEn {
    font-size: 13px;
}
.Product__TaxIncludedPrice {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0;
}

/*************** ご購入に際しての注意点 ***************/
.Attention {
    width: 750px;
    margin: -65px auto 0;
    padding-top: 65px;
}
.TransceiverTitle--Attention {
    font-size: 22px;
    text-align: center;
    margin: 0 0 32px;
}
.Attention__List {
    margin: 0;
}
.Attention__Item {
    list-style-type: none;
    position: relative;
    padding-left: 16px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.5;
}
.Attention__Item::before {
    content: "";
    border-radius: 50%; 
    width: 2px;
    height: 2px;
    display: block;
    position: absolute;
    left: 4px;
    top: 8px;
    background: #333; 
}

/* 公開日 **********************************/
.ReleaseDate {
    text-align: right;
    font-size: 13px;
    padding: 48px 0 96px;
    margin: 0;
    line-height: 1;
}

/* タブレット対応 **********************************/
@media screen and (max-width: 1024px) { 
    .Flow {
        padding: 32px 8px;
    }
    
}