@charset "utf-8";

/*font-size:.625rem;/*10px*/
/*font-size:.75rem;/*12px*/
/*font-size:.875rem;/*14px*/
/*font-size:1rem;/*16px*/
/*font-size:1.125rem;/*18px*/
/*font-size:1.25rem;/*20px*/

/*font-size:1.5rem;/*24px*/
/*font-size:1.625rem;/*26px*/
/*font-size:1.75rem;/*28px*/

/*font-size:1.875rem;/*30px*/

/*font-size:2.125rem;/*34px*/

/*font-size:2.25rem;/*36px*/

/*font-size:2.5rem;/*40px*/

/*font-size:3rem;/*48px*/

/*font-size:3.125rem;/*50px*/

/*font-size:3.125rem;/*58px*/

/*font-size:3.625rem;/*60px*/

/*font-size:4rem;/*64px*/


.wrapper{
position:relative;
overflow:hidden;
box-sizing:border-box;
color: #251714;
font-family: Meiryo, メイリオ, 'ＭＳ Ｐゴシック','MS PGothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka, sans-serif;
line-height:1.8;
font-size:1rem;
word-break: break-all;
}

.modal-area{
font-family: Meiryo, メイリオ, 'ＭＳ Ｐゴシック','MS PGothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka, sans-serif;
line-height:1.8;
font-size:1rem;
}

.wrapper *{
box-sizing:border-box;
color: inherit;
font-size: inherit;
word-break: inherit;
}

/*
#AS-footer{
position:relative;
z-index:10;
}
*/

.wrapper h1, .wrapper h2, .wrapper h3, .wrapper .fs24, .wrapper .fs40, .wrapper .fs60, .wrapper .btn{
font-family: 'M PLUS 1p', Meiryo, メイリオ, 'ＭＳ Ｐゴシック','MS PGothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka, sans-serif;
}


.wrapper .fs14{
font-family: Meiryo, メイリオ, 'ＭＳ Ｐゴシック','MS PGothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka, sans-serif;
}

.wrapper h1{position:relative;font-size:4.25rem;text-align:center;}
.wrapper h2{position:relative;font-size:2.5rem;text-align:center;line-height:1.2;}
.wrapper h3{position:relative;font-size:1.5rem;text-align:center;line-height:1.4;}
.wrapper h4{position:relative;font-size:1.25rem;text-align:center;line-height:1.2;}

.titlearea{
position: relative;
display: flex;
background: linear-gradient(180deg, #F1F4F5 0%, #ffffff 100%);
padding: 0;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.h1{
display: flex;
background: url(../images/index-bg_h1.png) center center no-repeat;
background-size: contain;
width:100%;
height: 530px;
max-width: 1200px;
min-height: 530px;
line-height: 1.4;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
justify-content: center;
align-items: center;
}

.h1 h1{
width:100%;
font-weight: 300;
line-height: 1;
text-align: center;
vertical-align: middle;
flex-shrink: 1;
}

.h1 h1 .bgblack{
display: inline-block;
margin-top: 1rem;
padding: 6px 12px;
letter-spacing: 0;
}

.wrapper h2{margin:60px auto 20px;padding-bottom: 5px;}

.wrapper h3{position: relative;margin:30px auto 20px;}
.wrapper h3 > span{position: relative;display: inline-block;}
.wrapper h3 > span::before,
.wrapper h3 > span::after{
content: "";
position: relative;
display: inline-block;
width: 3em;
margin: 0 .4em .3em;
border-bottom: 1px solid #000;
vertical-align: middle;
}

.wrapper p,
.wrapper ul{
padding:0;
margin:0 auto 1em;
}

.wrapper strong{
font-weight: bold;
}

.wrapper img{
max-width:100%;
height:auto;
}

.wrapper sup{
font-size:.5em;
}

.wrapper table{
width: 100% !important;
margin: 0 auto !important;
}


.notes{font-size:.875rem !important;}

.wrapper .fs12{font-size:.75rem !important;}
.wrapper .fs14{font-size:.875rem !important;}
.wrapper .fs16{font-size:1rem !important;}
.wrapper .fs18{font-size:1.125rem !important;}
.wrapper .fs20{font-size:1.25rem !important;}
.wrapper .fs22{font-size:1.375rem !important;}
.wrapper .fs24{font-size:1.5rem !important;}
.wrapper .fs26{font-size:1.625rem !important;}
.wrapper .fs28{font-size:1.75rem !important;}
.wrapper .fs30{font-size:1.875rem !important;}
.wrapper .fs40{font-size:2.5rem !important;}
.wrapper .fs48{font-size:3rem !important;}
.wrapper .fs60{font-size:3.625rem !important;}
.wrapper .fs68{font-size:4.25rem !important;}
.wrapper .fs80{font-size:5rem !important;}

.wrapper .mb0{margin-bottom: 0 !important;}
.wrapper .mb10{margin-bottom: 10px !important;}
.wrapper .mb20{margin-bottom: 20px !important;}
.wrapper .mb30{margin-bottom: 30px !important;}
.wrapper .mb40{margin-bottom: 40px !important;}
.wrapper .mb50{margin-bottom: 50px !important;}
.wrapper .mb60{margin-bottom: 60px !important;}
.wrapper .mb70{margin-bottom: 70px !important;}
.wrapper .mb80{margin-bottom: 80px !important;}
.wrapper .mb90{margin-bottom: 90px !important;}
.wrapper .mb100{margin-bottom: 100px !important;}

.wrapper .mt0{margin-top: 0 !important;}
.wrapper .mt10{margin-top: 10px !important;}
.wrapper .mt20{margin-top: 20px !important;}

.w800{max-width: 800px;margin-left: auto;margin-right: auto;}

.column{
display:flex;
width:100%;
}

.column *{
text-align:left;
}

.column > *{
padding:0 1rem;
min-height:0%;
flex-shrink:1;
}

.col{padding:0 1rem;flex-basis:100%;}
.col2{padding:0 1rem;flex-basis:200%;}
.col3{padding:0 1rem;flex-basis:300%;}
.col4{padding:0 1rem;flex-basis:400%;}
.col5{padding:0 1rem;flex-basis:500%;}
.col6{padding:0 1rem;flex-basis:600%;}

.middle{align-items:center;}
.center{text-align: center;justify-content: center;}
.left{text-align: left;justify-content: flex-start;}
.right{text-align: right;justify-content: flex-end;}

.center > *,
.left > *,
.right > *{
    flex-basis: auto;
    flex-grow: 0;
}

.reverse{flex-direction:row-reverse;}

.figure{padding:10px;text-align:center;}
.figure img{display: inline-block;max-width: 1000px;width: 100%;}
.caption{
display: flex;
min-height: 2.8em;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.4;
}

.box{
background-color: #ffffff;
margin: 40px auto;
padding:40px 20px;
border: 1px solid #cccccc;
box-shadow: 4px 4px 0 #cccccc;
}

.box.white{
background-color: #ffffff;
margin: 40px auto;
padding:40px 20px;
border: 1px solid #cccccc;
box-shadow: none;
}

.box *:nth-child(1){margin-top: 0;}
.box *:nth-last-child(1){margin-bottom: 0;}

.box h2, .box h3{margin-top: 0;}

.box h3{
position: relative;
background: #242637;
margin-left: -16px;
margin-right: -16px;
padding:4px 16px 4px;
color: #ffffff;
text-align: left;
}

.catch{
display: flex;
margin: 20vh auto;
justify-content: center;
align-items: center;
}

.catch p{
margin: 0 10px;
line-height: 1.4;
}

.catch > *{
flex-shrink: 1;
}

.reflection-text{
position: relative;
display: inline-block;
margin-top: .2em;
line-height: 1;
z-index: 1;
}

.reflection-text:nth-last-child(1){
z-index: 2;
}

.reflection-text *{
position: relative;
z-index: 10;
}

.reflection-text::before{
content: "";
position: absolute;
top:95%;
left:0;
right: 0;
background: linear-gradient(to bottom, transparent 0%, #fff 70%,  #fff 100%);
height: 100%;
z-index: 2;
}

.reflection-text::after{
content: attr(data-text);
position: absolute;
top:95%;
left:0;
right: 0;
height: 100%;
transform: scaleY(-1);
opacity: .1;
z-index: 1;
}

.reflection-product,
.reflection-security{
position: relative;
display: inline-block;
}

.reflection-product *,
.reflection-security *{
position: relative;
z-index: 10;
}

.reflection-product::before,
.reflection-security::before{
content: "";
position: absolute;
left: 4%;
right: 4%;
bottom:0;
background-color: #000000;
height: 2%;
border-radius: 100%;
box-shadow: 0 0 4px 4px #000000;
opacity: .2;
z-index: 2;
}

.reflection-security::before{
left: 30%;
right: 30%;
}

.reflection-product::after,
.reflection-security::after{
content: "";
position: absolute;
top:95%;
left:0;
right: 0;
background: linear-gradient(to bottom, #fff 0%, #fff 50%,  transparent 100%), url("../images/index-pic_product.png");
background-size: contain;
height: 100%;
transform: scaleY(-1);
opacity: .4;
z-index: 1;
}

.reflection-security::after{
background: linear-gradient(to bottom, #fff 0%, #fff 50%, transparent 100%), url("../images/index-pic_security.png");
background-size: contain;
}

.wrapper .bgblack{
background-color:#242637;
padding:2px 4px;
color: #ffffff;
}

.wrapper .bgwhite{
background-color:#ffffff;
padding:1px 20px 20px;
}

.wrapper .bggray{
background-color:#F3F7FA;
padding:1px 20px;
}

.wrapper .bgred{
background-color:#D71A20;
padding:20px;
line-height: 1.2;
color: #ffffff;
z-index: 1;
}

.notes{
display:table;
width:100%;
text-align:left;
}

.notes > li{
display:table-row;
}

.notes > li > span{
display:table-cell;
}

.notes > li > span:first-child{
text-align:right;
padding-right:.5em;
}

.notes.inline{
display: block;
}

.notes.inline > li{
display: inline-block;
padding-left:1em;
}

.notes.inline > li:nth-child(n+2){
}

/*
.list > li{
padding-left: 1em;
text-indent: -1em;
}

.list > li::before{
content: "";
display: inline-block;
background-color: #444444;
height: .2rem;
width: .2rem;
margin: .4em;
vertical-align: middle;
}
*/


.wrapper .orange{color:#FF8000;}
.wrapper .red{color:#B20000;}
.wrapper .blue{color:#0059B2;}
.wrapper .violet{color:#8500B2;}


.wrapper .btn{
position:relative;
display:inline-block;
background-color: #FF8000;
padding:.6em 2em;
border-radius: 4em;
color:#ffffff;
text-align:center;
text-decoration: none;
line-height:1.1;
}

.wrapper .btn.red{
background-color:#D71A20;
border-color:#D71A20;
}

.wrapper .link{
position:relative;
}

/*
.link::after{
content:"";
position:absolute;
top: 48%;
left: 100%;
display: block;
height:.5em;
width:.5em;
border:1px solid transparent;
border-top-color:#666666;
border-right-color:#666666;
line-height:1;
transform: translateY(-50%) rotate(45deg) skew(-10deg, -10deg);
transform-origin:center;
}*/

.link,
.modal{
/*border-bottom:1px dashed #000000;*/
}

.link:hover,
.modal:hover{
border-bottom-color:#cccccc;
}

.main-contents .modal:hover{
box-shadow: none;
scale: 1;
}

.modal::after{
display: none;
}

.scroll{
overflow-y: auto;
overflow-x: auto;
max-width: 100%;
max-height: 90vh;
white-space: pre;
}

.scroll table{
border-collapse: separate !important;
word-break: keep-all;
}

.scroll table th,
.scroll table td{
padding: 4px 6px !important;
word-break: keep-all;
border-radius: 0;
}

.scroll table .on{
background-color: white;
border-color: #ff8000;
color: #ff8000;
}

.scroll table thead th{
background-color: var(--lightgray) !important;
border-color: var(--middlegray) !important;
color: inherit !important;
}

.scroll table .bgwan th{
background-color: #FFEEEE !important;
border-color: #FF7D81 !important;
color: #D32450 !important;
}

.scroll table .bglan th{
background-color: #EAFAFF !important;
border-color: #8DE2FA !important;
color: #0685AB !important;
}
.scroll table thead{
position: sticky;
top:0;
z-index: 10;
}

.scroll table thead::before{
}

.scroll table thead tr{
position: relative;
z-index: 20;
}

.scroll table thead tr:nth-child(1){
z-index: 30;
}

.scroll table thead tr:nth-child(1) th:nth-child(3){
position: sticky;
left:0;
z-index: 30;
}

.scroll table tbody{
position: relative;
z-index: 1;
}

.scroll table tbody th{
}

.scroll table tbody .sticky{
position: sticky;
left: 0;
z-index: 2;
}

.scroll table tbody td{
text-align: center;
}

/*
.scroll table thead{
position: relative;
z-index: 10;
}

.scroll table thead tr{
position: relative;
z-index: 20;
}

.scroll table thead tr:nth-child(1){
z-index: 30;
}

.scroll table thead tr:nth-child(1) th:nth-child(2){
z-index: 30;
}

.scroll table tbody{
position: relative;
z-index: 1;
}

.scroll table tbody td{
text-align: center;
}
*/

/* section
------------------------------------------------------------------ */

.section{
overflow: hidden;
display: flex;
flex-wrap: wrap;
}

.section > .inner{
width: 100%;
max-width: 1200px;
margin: auto;
padding:0 10px;
flex-grow: 1;
}

.narrow{
max-width: 1000px;
margin: auto;
}


.funcBox{
position: relative;
z-index: 1;
}


.funcBox > div{
position: relative;
display: flex;
background-color: #F4F4F4;
margin: 36px 3px 6px;
padding: 16px 8px 8px;
border: 1px solid #C3C3C3;
flex-basis: 100%;
flex-direction: column;
justify-content: flex-start;
}

.funcBox > .wan{
background-color: #FFEEEE;
border: 1px solid #FF7D81;
color: #D32450;
}

.funcBox > .lan{
background-color: #EAFAFF;
border: 1px solid #8DE2FA;
color: #0685AB;
}

.funcBox > div > *{
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
z-index: 10;
}

.funcBox > div::before,
.funcBox > div::after{
content: "";
position: absolute;
top:0;
left: 50%;
display: block;
height: 70px;
width: 70px;
background-color: #C3C3C3;
border:1px solid #C3C3C3;
border-radius: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}

.funcBox > div::after{
content: "";
position: absolute;
display: block;
background-color: #F4F4F4;
background-position: center center;
background-repeat: no-repeat;
border: none;
z-index: 1;
}

.funcBox > .wan::before,
.funcBox > .wan::after{
background-color: #FFEEEE;
border-color:#FF7D81;
}

.funcBox > .lan::before,
.funcBox > .lan::after{
background-color: #EAFAFF;
border-color:#8DE2FA;
}

.funcBox > .wan::after{
background-image: url(../images/index-bg_funcbox_wan.png);
border: none;
}

.funcBox > .lan::after{
background-image: url(../images/index-bg_funcbox_lan.png);
border: none;
}

.funcBox > .wan:nth-child(1)::after{
background-image: url(../images/index-bg_funcbox_wan_1.png);
}

.funcBox > .lan:nth-child(2)::after{
background-image: url(../images/index-bg_funcbox_lan_2.png);
}

.funcBox > .lan:nth-child(3)::after{
background-image: url(../images/index-bg_funcbox_lan_3.png);
}

.funcBox > .lan:nth-child(4)::after{
background-image: url(../images/index-bg_funcbox_lan_4.png);
}

.funcBox h4{
display: flex;
min-height: 5em;
width: 100%;
font-size: 1rem;
justify-content: center;
align-items: center;
}

.funcBox ul{
background-color: #ffffff;
margin: 0;
padding: 10px 4px;
flex-grow: 20;
}

.funcBox li{
position: relative;
padding-left: 1em;
text-indent:-1em;
font-size: .875rem;
}

.funcBox li::before{
content: "";
display: inline-block;
background-color: #000;
height:.3em;
width:.3em;
margin: .45em .35em .25em;
border-radius: 100%;
}

.funcBox > .wan li::before{
background-color: #D32450;
}

.funcBox > .lan li::before{
background-color: #0685AB;
}

.modal-box{
background: url(../images/index-bg_popup.png) center center no-repeat;
min-height: 60vh;
}

.modal-box.case{
background-image: none;
}

.modal-box h1{position:relative;font-size:4.25rem;text-align:center;}
.modal-box h2{position:relative;font-size:2.5rem;text-align:center;line-height:1.2;}
.modal-box h3{position:relative;font-size:1.5rem;text-align:center;line-height:1.4;}
.modal-box h4{position:relative;font-size:1.25rem;text-align:center;line-height:1.2;}

.modal-box h4{
margin-bottom: 40px;
color: #FF8000;
font-size: 1.75rem;
}

.modal-box h5{
font-weight: bold;
}

.modal-area .modal-contents .modal-box{
max-width: 1000px;
}

/*
.modal-area{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
z-index: 100000;
}

.modal-bg{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
opacity: .4;
z-index: 10;
cursor: pointer;
}

.modal-inner{
position: absolute;
top: 50%;
left:50%;
display: flex;
height: 100%;
width: 90vw;
max-width: 1000px;
transform: translate(-50%, -50%);
z-index: 20;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
}

.modal-box{
display: none;
overflow: hidden;
background: url(../images/index-bg_popup.png) center center no-repeat;
background-color: #ffffff;
height: 0;
margin: 0 4px;
padding: 0 8px;
border: 0 solid #D93600;
opacity: 0;
transition: opacity .5s;
flex-direction: column;
justify-content: center;
align-items: center;
}

.modal-box.show{
height: auto;
min-height: 60vh;
margin: 8px;
padding: 8px;
border-width: 1px;
opacity: 1;
}

.modal-area .modal-box{
overflow: auto;
position: relative;
width: 100%;
padding: 40px;
border: none;
cursor: initial;
}

.modal-inner .modal-box::before,
.modal-inner .modal-box::after{
content: "";
position: absolute;
top: 10px;
right: 10px;
display: block;
background-color: #000000;
height: 21px;
width: 1px;
margin: 0 10px;
z-index: 30;
transform: rotate(45deg);
cursor: pointer;
}

.modal-inner .modal-box::after{
top:10px;
right: 10px;
height: 1px;
width: 21px;
margin: 10px 0;
}

.modal-area.show .modal-box.show,
.modal-area.show{
display: block;
opacity: 1;
}

.modal-box h4{
margin-bottom: 40px;
color: #FF8000;
font-size: 1.75rem;
}

.modal-box h5{
font-weight: bold;
}

body.modal{
overflow: hidden;
}
*/

.colorBox{
}

.colorBox > *{
margin-right: 4px;
padding: 10px 5px;
text-align: center;
line-height: 1.4;
}

.colorBox > *:nth-child(1){border: 1px solid #CCDAE8; background: #ffffff;color: #0055AA;}
.colorBox > *:nth-child(2){border: 1px solid #D3E8CC; background: #ffffff;color: #2AAA00;}
.colorBox > *:nth-child(3){border: 1px solid #E8DACC; background: #ffffff;color: #AA5500;}
.colorBox > *:nth-child(1){border-radius: 10rem 0 0 10rem;}
.colorBox > *:nth-last-child(1){border-radius: 0 10rem 10rem 0;}

.tabLink{
position: relative;
display: flex;
width: 100%;
justify-content: center;
z-index: 10;
}

.tabLink::after{
content: "";
position: absolute;
left: 0;
right:0;
bottom:0;
display: block;
background-color: #dddddd;
height: 4px;
z-index: -1;
}

.tabLink > ul{
display: flex;
max-width: 1080px;
margin: 0 auto;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
justify-content: center;
align-items: flex-end;
text-align: center;
}

.tabLink > ul li{
display: flex;
padding:0 5px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
justify-content: center;
}

.tabLink > ul li a{
display: block;
background-color: #eeeeee;
padding:20px 5px 15px;
border-bottom: 4px solid #dddddd;
font-size:1.75rem;
line-height: 1.1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
}

.tabLink > ul li.current a{
background-color: #ffffff;
border: 4px solid #dddddd;
border-bottom-color: #ffffff;
color: #FF8000;
opacity: 1;
cursor: default;
}

.tabLink > ul li.current a[href="#trendmicro"]{
color: #D7191F;
}

.tabLink > ul li.current a:hover{
opacity: 1;
}

.tabBox + .tabBox{
display: none;
}

.caseBox{
max-width: 1100px;
margin: 0 auto;
justify-content: space-between;
}

.caseLink{
position: relative;
display: flex;
flex-wrap: wrap;
}

.caseLink > *{
display: flex;
background: center center no-repeat;
background-size: contain;
height: 300px;
max-width: 300px;
margin: 0 auto;
padding-top:10%;
border: none;
text-decoration: none;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 100%;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.caseLink:nth-child(1) > *{background-image: url("../images/trendmicro-thumb_01.png");transform: translateY(35%);}
.caseLink:nth-child(2) > *{background-image: url("../images/trendmicro-thumb_02.png");}
.caseLink:nth-child(3) > *{background-image: url("../images/trendmicro-thumb_03.png");transform: translateY(35%);}

.caseLink > * > *{
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}

.case-title{
position: relative;
display: flex;
margin-left: -10px;
margin-right: -10px;
flex-wrap: wrap;
}

.case-title > *{
display: block;
background-color: #242637;
padding: 15px 4px;
color: #ffffff;
font-size:1.5rem;
text-align: center;
opacity: .8;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
line-height: 1.1;
}

.case-title > .case-subtitle{
background-color: #ffffff;
padding: 4px;
color: #000000;
font-size: 1rem;
}

.case-title > .case-btn{
display: block;
background-color: transparent;
}

.case-title > .case-btn .btn{
background-color: #000000;
padding: .2em 1em;
border: 1px solid #ffffff;
color: #FF8000;
font-size:1.125rem;
opacity: 1;
}

.modal-box.case h4{
background-color: #242637;
margin-bottom: 20px;
padding: 15px 5px 12px;
line-height: 1.1;
}

.modal-box.case h5{
background-color: #444444;
margin-bottom: 20px;
padding: 10px 5px 8px;
color: #ffffff;
font-size:1.5rem;
font-weight: normal;
text-align: center;
line-height: 1.1;
}

.modal-box.case .case-point{
background-color: #EDF2F8;
margin-top: 20px;
padding-bottom: 10px;
}

.modal-box.case .case-point > *{
margin: 0 20px 10px;
}

.modal-box.case .case-point > h5{
background-color: #CCDAE8;
margin: 0 0 20px;
padding: 15px 5px 12px;
color: #000000;
}

#case-01 .case-point{background-color: #EDF2F8;}
#case-01 .case-point > h5{background-color: #CCDAE8;}

#case-02 .case-point{background-color: #F5FAF3;}
#case-02 .case-point > h5{background-color: #D3E8CC;}

#case-03 .case-point{background-color: #F7F2ED;}
#case-03 .case-point > h5{background-color: #E8DACC;}


/* .bgtrendmicro
------------------------------------------------------------------ */

.bgtrendmicro{
background-color:#FEF5F5;
margin-bottom: 20px;
padding-bottom: 1px;
}

.bgtrendmicro > .inner{
width: 100%;
padding:0 10px;
}

.bgtrendmicro .title img{
width: 100%;
}

.bgtrendmicro .arrow{
position: relative;
display: block;
background-color: #EE9DA0;
height: 20px;
width: 20px;
margin: 100px auto;
border-radius: 100%;
}

.bgtrendmicro .arrow::before,
.bgtrendmicro .arrow::after{
content: "";
position: absolute;
display: block;
top:-50px;
background-color: #F6C9CA;
height: 20px;
width: 20px;
border-radius: 100%;
}

.bgtrendmicro .arrow::after{
top:auto;
bottom:-50px;
background-color: #E77275;
}




/* for IE adjustment
------------------------------------------------------------------ */

@media all and (-ms-high-contrast:none){

}






.sp-show{
display: none;
}

@media screen and (max-width:1200px){

}

@media screen and (max-width:660px){

.sp-show{
display: block;
}

.sp-clearBreak br{
display: none;
}

.column{
flex-wrap: wrap;
}

.sp-column2 > *{
flex-basis: 50%;
}

.wrapper h1, .wrapper h2, .wrapper h3{
font-family: Meiryo, メイリオ, 'ＭＳ Ｐゴシック','MS PGothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka, sans-serif;
}

.h1{
height: 50vh;
min-height: 340px;
}

.catch{
flex-wrap: wrap;
}

.catch > *{
order: 1;
z-index: 1;
}

.catch > *:nth-child(2){
flex-basis: 100%;
}

.catch > *:nth-child(1),
.catch > *:nth-last-child(1){
order: 2;
z-index: 2;
}

.reflection-text{
margin-top: 0;
}

.reflection-text:nth-last-child(1){
margin-top: 0;
margin-bottom: 50px;
}

.wrapper .fs20{font-size: 1.125rem !important;}
.wrapper .fs24{font-size: 1.125rem !important;}
.wrapper .fs40{font-size: 1.75rem !important; line-height: 1.2;}
.wrapper .fs60{font-size: 3.25rem !important;}

.scroll{
margin-left: 10px;
margin-right: 10px;
}

.fs14{
font-size: .825rem !important;
}

.box{
padding: 20px 10px;
}

/*
.modal-box{
margin-top: 60px;
}

.modal-area .modal-box{
padding: 40px 20px 20px;
}
*/

.tabLink::after{
display: none;
}

.tabLink > ul{
flex-wrap: wrap;
}

.tabLink > ul li{
padding-left: 20px;
padding-right: 20px;
order: 0;
}

.tabLink > ul li.current{
padding-left: 0;
padding-right: 0;
order: 1;
}

.tabLink > ul li a{
margin-top: 20px;
border-bottom: none;
border-radius: 10em;
font-size: 1.5rem;
}

.tabLink > ul li.current a{
background-color: #FF8000;
border: none;
border-radius: 0;
color: #ffffff;
font-size: 1.5rem;
}

.caseBox{
margin-bottom: 40px;
justify-content: center;
}

.caseBox *{
flex-grow: 1;
}

.caseLink{
padding: 0;
margin: 10px 0;
}

.caseLink:nth-child(n+1) > *{
background-position: right center;
height: auto;
max-width: none;
padding-right: 30%;
transform: none;
}

.case-title{
widows: 100%;
margin: 0;
}

.colorBox > *:nth-child(n+1){
border-radius: 0;
}

}

@media screen and (max-width:480px){

.sp-table{
	display:block;
	border:1px solid #cccccc;
}

.sp-table colgroup,
.sp-table col{
display: none;
}

.sp-table tr{
	display:flex;
	flex-wrap:wrap;
}

.sp-table tr > *{
	display:block;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:100%;
}

.sp-table tr > th br{
	display:none;
}

#AS-wrapper .sp-table th{
	border:none;
	border-bottom:1px solid #cccccc;
	text-align:center;
}

#AS-wrapper .sp-table td{
	padding:10px;
	border:none;
	text-align:center;
}

#AS-wrapper .sp-table td:nth-last-child(1){
	border-bottom:1px solid #cccccc;
}

}

@media print{



}

.tab-style{
  background-image: linear-gradient(to top, #dddddd 0, #dddddd 4px, white 4px);
  background-size: 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.tab-style h2{
  display: block;
  background-color: white;
  max-width: min(1000px, 95vw);
  padding: 30px 20px 10px;
  border: 4px solid #dddddd;
  border-bottom-color: white;
}

.point-title-area{
  position: relative;
  display: flex;
  color:#FF8000;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.point-title-area::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  display: block;
  background-color: #FF8000;
  height: 1px;
}

.point-title-area .point-title{
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.point-title-area .point-title *{
  margin: 0;
  padding: 0;
}

.point-title-area .point-title *:nth-child(1){
  align-self: flex-end;
}

.point-title-area .point-num-box{
  position: relative;
  display: flex;
  padding: 20px 50px;
  line-height: 1;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.point-title-area .point-num-box> *{
  position: relative;
  display: inline-block;
  background-color:#FF8000;
  color: white;
  z-index: 1;
}

.point-title-area .point-num-box::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background-color:#FF8000;
  width: 100%;
  padding-top: 100%;
  border-radius: 100em;
  transform: translateY(-50%);
  z-index: 0;
}

@media screen and (max-width: 480px){
  .main-contents .point-title-area{
    padding: 160px 10px 0;
  }
  .point-title-area::before{
    display: none;
  }
  .point-title-area .point-title *:nth-child(1){
    border-bottom: 1px solid #FF8000;
  }

  .point-title-area .point-num-box{
    position: absolute;
    top: 0;
  }
}

.to-point-link [class^="btn"]{
  padding-left: .5em;
  border-radius: 100em;
}

.to-point-link [class^="btn"]:hover{
  background-color:#FF8000;
}

.border-title{
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.border-title::before{
  content: "";
  display: block;
  background-color: var(--gray);
  height: 1.5em;
  width: .5em;
}

.border-title::after{
  content: "";
  display: block;
  background-color: var(--black);
  height: 1px;
  margin-left: 5px;
  flex-grow: 1;
}

.label-jcstar{
  display: block !important;
}