.wrapper { width: 100%; height: 100%; display: none; /*min-width:1290px;*/ position: relative; } .conts_whole { width: 100%; padding-right: 250px; } .mainContents { width: 90%; max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; } .conts_box { margin-bottom: 100px; } .conts_wrap { width: 90%; max-width: 1000px; margin: 0 auto; position: relative; } .conts_wrap_m { width: 70%; margin: 0 auto; } @media screen and (max-width: 767px) { .wrapper { min-width:auto; min-width:initial; } .conts_box { margin-bottom: 50px; } .conts_wrap { width: 90%; max-width: 90%; } .conts_wrap_m { width: 90%; } } /*loading*/ #loading { width: 100%; height: 100%; background: #FFF; position: relative; top:0; z-index: 999999; } #loading .loadimg { position: absolute; top:0; bottom:0; left:0; right:0; margin: auto; } #loading_logo { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background: #FFF; opacity: 0; } #loading_logo .logo-loading { width: 149px; height: 81px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; margin :auto; overflow: hidden; } #loading_logo .logo-loading svg { position: absolute; top: 0; left: 0 ;right: 0; margin: auto; } header { width: 100%; height: 150px; position: relative; background: #FFF; z-index:100; } header .logo { position: absolute; left: 0; right: 0; bottom:25px; margin: auto; } header .contact { position: absolute; right: 50px; bottom: 45px; } header a:hover .logo{ opacity:0.5;} header #gNavi { width: 101%; /*padding-bottom: 100px; */position: fixed; z-index: 97; padding-right: 250px; } header #gNavi > li { width: 16.6%; display: inline-block; text-align: center; vertical-align: top; padding :0; border-bottom: 1px solid #DFDFDF; position:relative; } header #gNavi > li > a { padding: 1rem 0; line-height: 1.5rem; display: block; font-weight:bold; } header #gNavi > li + li { border-left: 1px solid #DFDFDF; } header #gNavi li:last-child { display: none; } header #gNavi > li > a:after{ content:""; width:100%; height:100%; display:block; position:absolute; left:0; top:0; background-image: -webkit-linear-gradient(top, rgba(256, 256, 256, 1), rgba(240, 240, 240, 1)); background-image: -moz-linear-gradient(top, rgba(256, 256, 256, 1), rgba(240, 240, 240, 1)); background-image: -o-linear-gradient(top, rgba(256, 256, 256, 1), rgba(240, 240, 240, 1)); background-image: -ms-linear-gradient(top, rgba(256, 256, 256, 1), rgba(240, 240, 240, 1)); background-image: linear-gradient(top, rgba(256, 256, 256, 1), rgba(240, 240, 240, 1)); } header #gNavi > li:hover > a:after{ opacity:0; -ms-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;} header #gNavi > li:hover > a span{ position:relative; z-index:10; color:#FFFFFF;} header #gNavi li a span{ position:relative; z-index:10; font-weight:700; color:#333333;} .device-tablet header #gNavi > li > a span{ color:#333333;} .device-tablet header #gNavi > li > a:after{opacity:1;} .device-tablet header #gNavi > li.open > a span{ color:#FFFFFF;} .device-tablet header #gNavi > li.open > a:after{opacity:0;} /*current*/ #about header #gNavi > li.aboutNav > a:after, #service header #gNavi > li.serviceNav > a:after, #channel header #gNavi > li.channelNav > a:after, #support header #gNavi > li.supportNav > a:after, #news header #gNavi > li.newsNav > a:after, #activity header #gNavi > li.activityNav > a:after{ opacity:0; transition: all 0.2s linear;} #about header #gNavi > li.aboutNav > a span, #service header #gNavi > li.serviceNav > a span, #channel header #gNavi > li.channelNav > a span, #support header #gNavi > li.supportNav > a span, #news header #gNavi > li.newsNav > a span, #activity header #gNavi > li.activityNav > a span{ position:relative; z-index:10; color:#FFFFFF;} @media screen and (max-width: 1152px) { header {z-index: 1002; } } @media screen and (max-width: 1101px) { .wrapper { min-width:auto; min-width:initial; } header {z-index:1002; } body.device-tablet header #gNavi li div.megaMenu h2{ float:none; width:auto; display:block; text-align:center;} body.device-tablet header #gNavi li div.megaMenu ul{ width:90%; margin:0 5%; padding:0 0 10px 0;} } header #gNavi li div.megaMenu { position:absolute; top:52px; bottom:auto; left: 0; box-sizing: border-box; width: 100%; padding:0; -webkit-transition: all .2s ease; transition: all .2s ease; opacity: 0; padding-right:0; z-index:100; height:0px; overflow:hidden; } header #gNavi > li:hover div.megaMenu { top: 52px; bottom:auto; visibility: visible; opacity: 1; height:auto; } .device-tablet header #gNavi > li div.megaMenu { top: 52px; bottom:auto; visibility: visible; opacity: 0; height:0px; overflow:hidden; } .device-tablet header #gNavi > li{ position:initial;} .device-tablet header #gNavi > li.open div.megaMenu { width:100%; top:52px; bottom:auto; visibility: visible; opacity: 1; height:auto; } header #gNavi li div.megaMenu h2{ color:#FFFFFF; width:100%; display:block; padding:20px 0; margin:0 2%; line-height:53px; display:none;} header #gNavi li div.megaMenu h2 a{ font-size:1.6rem;} header #gNavi li div.megaMenu ul{ width:100%; display:block; float:right; padding:0 0 10px 0; margin:0; text-align:center; } header #gNavi li div.megaMenu ul{} header #gNavi li div.megaMenu ul li:first-child{ display:block;} header #gNavi li.aboutNav div.megaMenu ul li{ width:auto; display:block; } header #gNavi li.aboutNav div.megaMenu ul li:last-child{ } header #gNavi li.aboutNav div.megaMenu ul li a{ padding:0 0.5em;} header #gNavi li.serviceNav div.megaMenu ul li{ display:block; text-align:center; } header #gNavi li.serviceNav div.megaMenu ul li a{ text-align:center;} header #gNavi li.activityNav div.megaMenu ul li:last-child{ display: block; } header #gNavi li div.megaMenu ul li a{ line-height:36px; 10px; color:#FFFFFF; font-size: 0.8rem; font-weight:700; display:block;} header #gNavi li div.megaMenu ul li a:hover { background:rgba(0,0,0,0.1);} header #gNavi > li div.megaMenu .btn_close_nav{ display:none;} header .contact:before { content: ''; width: 5px; height: 5px; color: inherit; border-style: solid; border-width: 1px; border-left-color: transparent; border-bottom-color: transparent; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: 0 1rem 0 .5rem; display: inline-block; vertical-align: middle; } @media screen and (max-width: 1440px) { header #gNavi { padding-right: 200px; } } @media screen and (max-width: 1152px) { .wrapper { min-width:auto; min-width:initial; } header #gNavi { position: relative; padding-right: 0; } header #gNavi li div.megaMenu {width : 100%;} .device-tablet header #gNavi > li.open div.megaMenu .btn_close_nav{color: #FFF; padding: 10px 0; width: 100%; background: rgba(255,255,255,.2); text-align: center; border: none; outline: none; display:block; } } @media screen and (max-width: 767px) { header { height: 70px; z-index: 9999; /*position: fixed; top: 0;*/ } header .logo { left: 0; right:0; top:16px; bottom:auto; margin: auto; } header .contact { font-size: .6rem; font-weight: bold; text-align: center; width: 70px; height: 100%; padding: 5px 0; border-right: 1px solid rgba(0,0,0,.2); position: absolute; left:0; top:0; right : auto; bottom: auto; display: table-cell; vertical-align: middle; } header .contact:before { content:''; width: 30px; height: 22px; margin: 10px auto 5px; background: url(../img/icon_mail.svg) no-repeat; background-size: 100% auto;display: block; border: none; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } header #gNaviBtn { font-size: .7rem; font-weight: bold; width: 70px; height: 70px; padding: 35px 5px 5px; border: none; outline: none; border-left: 1px solid rgba(0,0,0,.2); position: absolute; top:0; right: 0; background: none; } header #gNaviCloseBtn { width: 100%; border: none; outline: none; padding: 1rem 0; } header #gNaviBtn:before, header #gNaviBtn:after { content:''; width: 30px; height: 1px; background: #000; display: inline-block; position:absolute; top: 28px; right: 20px; margin: auto;} header #gNaviBtn:before { -ms-transform: translateY(-6px); -webkit-transform: translateY(-6px); transform: translateY(-6px); } header #gNaviBtn:after { -ms-transform: translateY(6px); -webkit-transform: translateY(6px); transform: translateY(6px); } header #gNaviBtn.open:before { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } header #gNaviBtn.open:after { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } header #gNavi { display: none; position: absolute; top: 70px; z-index: 99; background: #FFF; border-top: 1px solid #DFDFDF;} header #gNavi li { width: 100%; } header #gNavi > li { font-weight: bold; } header #gNavi li + li { border-left: none; } header #gNavi li:last-child { display: inline-block; } header #gNaviBtn.open + #gNavi { display: block; } header #gNavi li div.megaMenu { position: relative; top: auto; left: 0; padding-right:0; visibility: visible; display: none; opacity: 1; height:auto; width:100%; background:#f5f5f5!important; } #about header #gNavi li.aboutNav div.megaMenu { display: block; } #service header #gNavi li.serviceNav div.megaMenu { display: block; } header #gNavi li:hover div.megaMenu { top: 0; } header #gNavi li div.megaMenu h2{ display: none; } header #gNavi li div.megaMenu ul{ width:100%; display:block; font-size: .8em; float:none; padding: 0; margin: 0; border-top:1px solid #fff; } header #gNavi li div.megaMenu ul li:first-child{border-left:none; } header #gNavi li.aboutNav div.megaMenu ul li{ width:100%; display:block; border-right:none; border-bottom:1px solid #fff; } header #gNavi li.serviceNav div.megaMenu ul li{ width:100%; display:block; border-right:none; border-bottom:1px solid #fff; } header #gNavi li div.megaMenu ul li a{ line-height:300%; color:#000000!important; font-weight:500; font-size:0.875rem; } header #gNavi > li:hover div.megaMenu { visibility: hidden; } } #side_subscription { width: 250px; height: 100%; color: #FFF; padding: 0; position: fixed; top:0; right: 0; background-size: 100% 1500px; background-repeat: no-repeat; z-index: 1001; } #side_subscription h2 { font-size: 0.94rem; font-weight: bold; text-align: center; margin: 0 0 15px 0; padding:15px 15px 11px; } #side_subscription h2:after { content:''; width: 84px; height: 84px; background: url(../img/icon_subscription.svg) no-repeat center center; background-size: 84px 84px; display: block; margin: 0 auto; padding: 30px 0 12px 0; margin-bottom: 0; } /*#side_subscription h2:hover { border-radius: 5px; overflow: hidden; box-shadow: 0 2px rgba(0,0,0,.2); display: block; transform: translateY(-2px); margin-bottom: 15px;}*/ #side_subscription #btnSubscription{ display:block;} #side_subscription h3 { margin-bottom: 1em; } #side_subscription h3 a { font-size: 1.1rem; font-weight: bold; } #side_subscription h3:hover { background-image: -moz-linear-gradient(to bottom, #ffffff, #f5f5f5); background-image: -ms- linear-gradient(to bottom, #ffffff, #f5f5f5); background-image: -webkit-linear-gradient(to bottom, #ffffff, #f5f5f5); background-image: linear-gradient(180deg , #FF6600, #FF0000 100% , #FF0000); } #side_subscription h3:hover a{ color:#FFFFFF!important; transition: all 0.2s linear;} #side_subscription section{ margin:0 15px;} #side_subscription .telfax{ width:100%; } #side_subscription .telfax dt{ margin-right:0;} #side_subscription .banner { width: 100%; background: #FFF; text-align: center; } #side_subscription .banner a { width: 100%; height: 100%; padding: 10px 0; display: block; } #side_subscription .bnr_simulation { width: 100%; height: 0; padding: 0 0 36.4%; background: url(../img/btn_simulation.png) no-repeat; background-size: 100% 100%; text-indent: 100%; overflow: hidden; white-space: nowrap; -ms-transition: all .3s; -wekbit-transition: all .3s; transition: all .3s; } #side_subscription .bnr_simulation:hover{ background-image: url(../img/btn_simulation_on.png); } #side_subscription .menu { width: 100%; margin: 15px 0; border-top: 1px solid rgba(255,255,255,.2);} #side_subscription .menu li { border-bottom: 1px solid rgba(255,255,255,.2); } #side_subscription .menu li a { padding: 12px 0; display: block; font-weight:bold; font-size:0.94rem; letter-spacing:0.05rem; background:rgba(255,255,255,0); } #side_subscription .menu li a:before { content: ''; width: 5px; height: 5px; border-style: solid; border-width: 1px; border-color: #FFF #FFF transparent transparent; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: 0 1rem 0 .5rem; display: inline-block; vertical-align: middle; } #side_subscription .menu li a:hover{background:rgba(255,255,255,0.1); transition: all 0.2s linear;} #side_subscription #btnClose { color: #FFF; padding: 10px 0; width: 100%; background: rgba(255,255,255,.2); text-align: center; border: none; outline: none; display: none; } @media screen and (max-width: 1440px) { .conts_whole { padding-right: 200px; } #side_subscription { width: 200px; } #side_subscription h2 { font-weight: 500;} #side_subscription h2:after { width: 50px; height: 50px; padding: 40px 0 6px 0; background-size:50px 50px; } #side_subscription .banner { font-size: 0.94rem; } #side_subscription .menu li a { font-size:.8rem; letter-spacing: 0; padding: 10px 0; } #side_subscription .telfax dt span{ display:none;} } @media screen and (max-width: 1152px) { .conts_whole { padding-right: 0; } #side_subscription { width: 100%; position: relative; top: auto; right: auto; padding: 0; } #side_subscription h2:before { display: none; content: ''; width: 5px; height: 5px; border-style: solid; border-width: 1px; border-color: transparent #FFF #FFF transparent; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: 0 1rem 0 .5rem; display: inline-block; position: absolute; top:0; left: 5%; right: auto; bottom:0; margin: auto; } #side_subscription h2:after { display: none; } #side_subscription .banner{ } #side_subscription .banner a{ line-height:1.5rem;} #side_subscription .btn_open + section{ width: 90%; margin: auto; padding: 15px 0; display: none; } #side_subscription .btn_open.open + section{ display: block; } #side_subscription .btn_open.open + section + #btnClose{ display: block; } #side_subscription .bnr_simulation { text-align: center; display: block; text-align: center; margin: 5px 0 15px 0; padding: 15px 50px 15px 50px; background: #2e8fbc; position: relative; text-indent: 0; height: auto; line-height:2em; font-size: 1.1rem;} #side_subscription .bnr_simulation .icon_calculator { width: 28px; height: 35px; position: absolute; left: 15px; top: 15px; fill: #FFF;} #side_subscription .bnr_simulation span { font-size: .7rem; display:inline-block; margin-right:1rem; font-size: 1.1rem; } #side_subscription .telfax { width: 48%; display:inline-block; margin:0 0 1em; position:relative; padding-left:11rem; } #side_subscription .telfax:first-child{ margin-right:2%;} #side_subscription .telfax dt{ width:10em; display:inline-block; text-align:center; position:absolute; left:0; top:0;} #side_subscription .telfax dd { font-size:2rem; display:inline-block; vertical-align: middle; text-align:center; margin-bottom:0; padding: 3px 0 1px; } #side_subscription .telfax dd:after { content: '\A'; white-space:pre; } #side_subscription .menu{ border:none;} #side_subscription .menu li{ width:48%; display:inline-block;} #side_subscription .menu li:nth-child(odd){ margin-right:2%;} #side_subscription .bnr_simulation:hover{ background: #FFF; color: #2e8fbc; } #side_subscription .bnr_simulation:hover .icon_calculator { fill: #2e8fbc; } } @media screen and (max-width: 767px) { #side_subscription .menu{margin-top:0;} #side_subscription .menu li{ width:100%; display:inline-block; } #side_subscription .btn_open + section{ padding-top:0;} /* #side_subscription { position: fixed; top: 70px; height: auto; } #side_subscription + * { margin-top: 120px!important; } */ #side_subscription .telfax { width: 100%; display:inline-block; margin:0 0 1em; position:relative; padding-left:0; } #side_subscription .telfax:first-child{ margin-right:2%;} #side_subscription .telfax dt{ width:100%; display:inline-block; text-align:center; position:relative; left:auto; top:auto;} #side_subscription .telfax dd { font-size:2rem; display:inline-block; vertical-align: middle; text-align:center; margin-bottom:0; padding: 3px 0 1px; display:block; } #side_subscription .bnr_simulation{display:block; font-size:0.94rem; text-align:left; line-height:1.5em; padding: 1empx 0px 1em 60px;} #side_subscription .bnr_simulation span{ display:block; font-size:0.94rem; text-align:left;} } #foot_banner { padding-top: 20px; margin-top: 0; background: #F0F0F0;} footer { width: 100%; padding: 2rem 50px 60px; background: #FFF; } footer .logo_h { margin: 2rem auto .5rem; } footer .oldname { text-align: center; font-size: .9rem; margin-bottom: 1em; } footer .address{ display: table; margin: 0 auto; } footer .address p { display: inline-block; margin-right: 0.5rem; } footer .telfax{ width: auto; display: inline-block; } footer .telfax dt{ display:inline-block; padding: 0 .5em; margin-left:0.5em; font-size:0.8rem; position:relative;} footer .telfax dd{ display:inline-block; text-align:left; font-size: 1.6rem; padding:0.4rem 0;} footer .telfax dt span{ position:absolute; top: -22px; padding:0; color:#FF0000; left:5px; font-size:0.7rem; text-align:center; width:110px;} footer .telfax dt span:before{ content:""; width:1px; height:15px; background:#FF0000; position:absolute; left:-5px; -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); } footer .telfax dt span:after{ content:""; width:1px; height:15px; background:#FF0000; position:absolute; right:-5px; -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } footer .contsL { width: 30%; min-width: 320px; float: left; margin-right: 30px; } footer .contsR { width: 100%; padding-left: 350px; } footer #pagetop{ width:64px; height:0; padding: 25px 0 39px; display:block; margin:0 auto; font-size: .8rem; text-align: center; line-height: 120%; position:fixed; bottom: 115px; border-radius: 0; right: 300px; z-index: 999; opacity: .8; -ms-transition: opacity .3s;-webkit-transition: opacity .3s;transition: opacity .3s;} footer #pagetop:hover{ opacity: 1; } footer #sitetop{ width:64px; height:0; padding: 42px 0 22px; display:block; margin:0 auto; font-size: .8rem; text-align: center; line-height: 120%; position:fixed; bottom: 50px; border-radius: 0; right: 300px; z-index: 999; opacity: .8; -ms-transition: opacity .3s;-webkit-transition: opacity .3s;transition: opacity .3s;} footer #sitetop:before { content:''; width: 40%; height: 0; padding-bottom: 40%; background: url(../img/icon_home.svg) no-repeat; background-size: 100% auto; background-position: center center; position: absolute; top: 10px; left: 0; right: 0; margin: auto; } @media screen and (max-width: 1440px) { footer #pagetop, footer #sitetop{right: 250px;} } @media screen and (max-width: 1152px) { footer #pagetop, footer #sitetop{right: 50px;} } @media screen and (max-width: 787px) { footer #pagetop, footer #sitetop{ width: 40px; height: 40px; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; bottom: 2%; right: 2%;} footer #sitetop { margin-right: 41px; } } footer #pagetop:before{ content: ''; width: 10px; height: 10px; border-style: solid; border-width: 1px; border-color: #fff transparent transparent #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-right: .5rem; display: inline-block; vertical-align: middle; position:absolute; left:0; right: 0; top: 15px; margin: auto; } @media screen and (max-width: 787px) { footer #pagetop:before{ top: 16px; } } footer .btnarea { width: 70%; min-width: 600px; margin: 0 auto; } footer .btnarea a { color: #FFF; padding: 10px; display: inline-block; line-height: 2.5rem; font-weight: bold; text-align: center; margin-bottom: 2%; border-radius: 5px; } footer .page_list { text-align: center; border-bottom: 1px solid #CCC; padding-bottom: 2rem; } footer .page_list > ul li { display: inline-block; margin: .5rem; padding-left: 1rem; text-indent: -1rem; } footer .page_list > ul li:hover{ text-decoration:underline;} footer .page_list > ul > li:before { content: ''; width: 5px; height: 5px; border-style: solid; border-width: 1px; border-color: #000 #000 transparent transparent; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-right: .5rem; display: inline-block; vertical-align: middle; } /* footer .page_list > ul > li > ul { margin-top: .5rem; } footer .page_list > ul > li > ul li { margin-left: 1rem; font-size: .9em;} footer .page_list > ul > li > ul li:before { content: ''; width: 5px; height: 5px; border-style: solid; border-width: 1px; border-color: transparent transparent #000 #000; margin-right: .5rem; display: inline-block; vertical-align: middle; } */ footer .copyright { font-size: .7rem; text-align: center; margin-top: 60px;} @media screen and (max-width: 767px) { footer { margin: 0 auto; padding: 1rem 5%; text-align: center; } footer .contsL { width: 100%; min-width: 0; float: none;} footer .address p { margin-right: 0; } footer .contsR { display: none; } footer .btnarea { width: 100%; min-width: 0; margin: 0; } footer .btnarea a { width: 100%; margin: 5px 0!important;} footer .page_list > ul { display: inline; } } /*subheader*/ .subheader { width: 100%; text-align: center; padding: 0 ;position: relative; z-index: 2; background: #FFF; } .subheader ul { display: flex; justify-content: space-around; margin:0 3rem; } .subheader li { display: inline-block; font-weight: 500; line-height: 120%; margin: 0 0.7rem; } .subheader li a { padding-bottom: .8rem; padding: 1.5rem 0; display: block; font-size:0.94rem; letter-spacing:0.05rem; } body.top .subheader { margin-top: -120px; } body:not(.top) .subheader { margin-top: -4rem; margin-bottom:50px; } @media screen and (max-width: 767px) { body.top .subheader { margin-top: 0px; } .subheader { text-align: left; height: 4.5rem; overflow-y: hidden; -webkit-overflow-scrolling: touch; overflow-x: scroll;} body:not(.top) .subheader { margin-bottom: 2rem; } .subheader ul { white-space: nowrap; height: 4rem; overflow-y: hidden; display: block; justify-content: auto; margin:0 1rem; } } #foot_sns { color: #FFF; width: 100%; background: #F0F0F0; padding: 50px 0; text-align: center; position: relative; } .btn_facebook, .btn_twitter { color: #FFF; font-size: 1.1rem; font-family: 'Roboto Condensed', sans-serif; letter-spacing: .05em; border-radius: 5px; position: relative; display: inline-block; -ms-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;} .btn_facebook { background: #537ABC; border: 1px solid #537ABC; float: left; } .btn_twitter { background: #77CBEF; float: right; } .btn_facebook .icon_facebook{ position: absolute; top: 0 ; left: 20px; bottom: 0; margin: auto; width: 20px; height: 25px; fill:#FFF; } .btn_facebook:hover { background: #FFF; color: #537ABC; } .btn_facebook:hover .icon_facebook { fill: #537ABC; } @media screen and (max-width: 767px) { .btn_facebook, .btn_twitter { padding-top: 40px; } } /*column layout*/ /* 1カラム�*/ .column1 { width: 100%; } /* 2カラム�*/ .column2 { zoom: 1;} .column2:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; } .column2 > * { width: 49%; float: left; margin-bottom: 2%; } .column2 > *:nth-child(even) { margin-left: 2%; } /* 3カラム */ .column3 { zoom:1;} .column3:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; } .column3 > * { width: 32%; float: left; margin-bottom: 20px; margin-right: 2%; } .column3 > *:nth-child(3n) { margin-right: 0; } /* 4カラム*/ .column4 { width: 100%; zoom:1;} .column4:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; } .column4 > * { width: 23.5%; float: left; margin-bottom: 20px; margin-right: 2%;} .column4 > *:nth-child(4n) { margin-right: 0; } /* 5カラム*/ .column5 { width: 100%; zoom:1;} .column5:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; } .column5 > * { width: 18.4%; float: left; margin-bottom: 0; margin-right: 2%;} .column5 > *:nth-child(5n) { margin-right: 0; } /* 6カラム*/ .column6 { width: 100%; zoom:1;} .column6:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; } .column6 > * { width: 15%; float: left; margin-bottom: 0; margin-right: 2%;} .column6 > *:nth-child(6n) { margin-right: 0; } @media screen and (max-width: 767px) { .column1 { margin-bottom: 5%; } /* 2カラム�*/ .column2 > * { width: 100%; float: none; margin-bottom: 5%; } .column2 > *:nth-child(even) { margin-left: 0; } /* 3カラム */ .column3 { width: 100%; zoom: 1;} .column3:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; } .column3 > * { width: 100%; float: none; margin-bottom: 4%; margin-right: 0; } /* 4カラム*/ .column4 { width: 100%; zoom: 1;} .column4:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; } .column4 > * { width: 48%; float: left; margin-bottom: 4%; margin-right: 0; } .column4 > *:nth-child(even) { margin-left: 4%; } .column5 { width: 100%; zoom:1;} .column5:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; } .column5 > * { width: 48%; float: left; margin-bottom: 4%; margin-right: 0; } .column5 > *:nth-child(5n) { margin-right: 0; } .column5 > *:nth-child(even) { margin-left: 4%; } .column6 { width: 100%; zoom:1;} .column6 > * { width: 32%; } .column6 > *:nth-child(5n) { margin-right: 2%; } .column6 > *:nth-child(3n) { margin-right: 0; } } /*マージン*/ .m0 { margin: 0 !important; } .mb0 { margin-bottom:0px !important;} .mb5 { margin-bottom:5px !important;} .mb10 { margin-bottom:10px !important;} .mb15 { margin-bottom:15px !important;} .mb20 { margin-bottom:20px !important;} .mb25 { margin-bottom:25px !important;} .mb30 { margin-bottom:30px !important;} .mb40 { margin-bottom:40px !important;} .mb50 { margin-bottom:50px !important;} .mb55 { margin-bottom:55px !important;} .mb60 { margin-bottom:60px !important;} .mb70 { margin-bottom:70px !important;} .mb75 { margin-bottom:75px !important;} .mt0 { margin-top:0px !important;} .mt10 { margin-top:10px !important;} .mt20 { margin-top:20px !important;} .mt30 { margin-top:30px !important;} .mt40 { margin-top:40px !important;} .mt50 { margin-top:50px !important;} .mr0 { margin-right: 0px !important; } .pb0 { padding-bottom:0 !important;} .pb10 { padding-bottom:10px !important;} .pb15 { padding-bottom:15px !important;} .pb20 { padding-bottom:20px !important;} .pb30 { padding-bottom:30px !important;} .pb40 { padding-bottom:40px !important;} .pb50 { padding-bottom:50px !important;} .pb100 { padding-bottom:100px !important;} .pt0 { padding-top:0px !important;} .pt10 { padding-top:10px !important;} .pt15 { padding-top:15px !important;} .pt20 { padding-top:20px !important;} .pt30 { padding-top:30px !important;} .pt40 { padding-top:40px !important;} .pt50 { padding-top:50px !important;} @media screen and (max-width: 767px) { /*マージン*/ .m0 { margin: 0 !important; } .mb0 { margin-bottom:0px !important;} .mb5 { margin-bottom:0.25rem !important;} .mb10 { margin-bottom:0.5rem !important;} .mb15 { margin-bottom:0.75rem !important;} .mb20 { margin-bottom:1rem !important;} .mb25 { margin-bottom:1rem !important;} .mb30 { margin-bottom:1.5rem !important;} .mb40 { margin-bottom:2rem !important;} .mb50 { margin-bottom:2.5rem !important;} .mb55 { margin-bottom:2.5rem !important;} .mb60 { margin-bottom:3rem !important;} .mb70 { margin-bottom:3.5rem !important;} .mb75 { margin-bottom:3.5rem !important;} .mt0 { margin-top:0px !important;} .mt10 { margin-top:0.5rem !important;} .mt20 { margin-top:1rem !important;} .mt30 { margin-top:1.5rem !important;} .mt40 { margin-top:2rem !important;} .mt50 { margin-top:2.5rem !important;} .mr0 { margin-right: 0px !important; } .pb0 { padding-bottom:0 !important;} .pb10 { padding-bottom:0.5rem !important;} .pb15 { padding-bottom:0.75rem !important;} .pb20 { padding-bottom:1rem !important;} .pb30 { padding-bottom:1.5rem !important;} .pb40 { padding-bottom:2rem !important;} .pb50 { padding-bottom:2.5rem !important;} .pb100 { padding-bottom:5rem !important;} .pt0 { padding-top:0px !important;} .pt10 { padding-top:0.5rem !important;} .pt15 { padding-top:0.75rem !important;} .pt20 { padding-top:1rem !important;} .pt30 { padding-top:1.5rem !important;} .pt40 { padding-top:2rem !important;} .pt50 { padding-top:2.5rem !important;} } .floatL{ float:left;} .floatR{ float:right;}