CSS_ベース

@charset "utf-8"; /*------------------------------------------------- for [XXX] Style Name: style.css File URL: assets/css/style.css Created: 20XX-X-X Description by ieha -------------------------------------------------*/ /* ************************************ **** pc,tablet,smp **** ************************************ */ /* structure ------------------------- */ html { font-size: 62.5%; } *, *::before, *::after { box-sizing: border-box; } h1, h2, h3, p, dl, dt, dd, ul, ol, li { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { line-height: 1; } body { line-height: 1.9; font-size: 1.3rem; font-family: Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ ゴシック", "モトヤLシーダ3等幅", MotoyaLCedar, Verdana, Arial, sans-serif; color: #252525; background: rgba(41,130,122,.3); /* Safariでopacityにトランジションかけた時のチラつき防止 */ -webkit-font-smoothing: antialiased; } .ie__alert { display: none; } /* フェードイン */ /*.wrap { background: #fff; opacity: 0; }*/ /* contents area ------------------------- */ .wrap, .header, .contents, .footer, .main, .cont-box, .cont-box__in, .cont-box__in-in, .cont-box__in-in-in { position: relative; } /* margin clear */ .cont-box:last-child, .cont-box__in:last-child, .cont-box__in-in:last-child, .cont-box__in-in-in:last-child { margin-bottom: 0; } /* anchor ------------------------- */ a::link, a::visited { /*text-decoration: none;*/ color: #0C3388; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } a::hover, a::hover img, input:hover { opacity: .7; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; /* Safariチラツキ防止 */ -webkit-transform:perspective(0); } .link::before { content: "»"; margin-right: 7px; vertical-align: center; } /* list ------------------------- */ .ul, .ol, .dl { line-height: 1.5; margin: 0; padding: 0; } .ul__dot > li { margin-left: 1.5em; list-style-type: disc; } .ol__dec li { margin-left: 1.5em; list-style-type: decimal; } .dl__line { line-height: 4; text-align: left; border-bottom: 1px solid #c6c6c6; position: relative; } .dl__line > dt { width: 9em; padding-left: 1em; border-top: 1px solid #c6c6c6; float: left; } .dl__line > dd { margin-left: 9em; padding-left: 1em; border-left: 1px solid #c6c6c6; border-top: 1px solid #c6c6c6; } .dl__line ul, .dl__line ol, .dl__line dd dl { line-height: 2.5; padding: 10px 0; } /* table ------------------------- */ .bTb { width: 100%; border-collapse: separate; border-spacing: 1px; } .bTb caption, caption { display: none; } .bTb th { font-weight: bold; } .bTb td {} .bTb__color th { padding: 6px 10px; color: #f8f8f1; background: #9c9c9c; } .bTb__color td { padding: 6px; border-bottom: solid 1px #d1d1d1; border-right: solid 1px #d1d1d1; background: #fafafa; } /* utility ------------------------- */ /* margin, padding */ .mb10 { margin-bottom: 10px!important; } .mb20 { margin-bottom: 20px!important; } .mb30 { margin-bottom: 30px!important; } /* display */ .dpno { display: none; } /* text */ /* text -- 色 */ .red { color: #c22139; } .blue { color: #214ec2; } /* text -- 太さ */ .bold { font-weight: bold; } /* text -- シャドウ -- 黒 */ .shadow-txt-black { -webkit-text-shadow: 0 0 2px rgba(0,0,0,.8); -moz-text-shadow: 0 0 2px rgba(0,0,0,.8); -ms-text-shadow: 0 0 2px rgba(0,0,0,.8); -o-text-shadow: 0 0 2px rgba(0,0,0,.8); text-shadow: 0 0 2px rgba(0,0,0,.8); } /* text -- シャドウ -- 白 */ .shadow-txt-white { -webkit-text-shadow: 0 1px 0 rgba(255,255,255,1);; -moz-text-shadow: 0 1px 0 rgba(255,255,255,1);; -ms-text-shadow: 0 1px 0 rgba(255,255,255,1);; -o-text-shadow: 0 1px 0 rgba(255,255,255,1);; text-shadow: 0 1px 0 rgba(255,255,255,1);; } /* text -- 揃え位置 */ .tac { margin: 0 auto; text-align: center; } /* text -- 強調装飾 */ .marker { margin: 0 2px; padding: 3px; border-bottom: 1px solid rgba(120,100,24,.2); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: rgba(120,100,24,.2); } /* display */ .block { display: block; } /* float */ .fl { float: left; } .fr { float: right; } .fr.box, img.fr { margin-left: 1em; } /* box */ .box { padding: 10px; } .box__dotted { border: 1px dotted rgba(0,0,0,.3); } .box__gray { border: 1px solid #e8e8e8; background-color: #f1f1f1; } .box__white { border: 1px solid #fff; background: #fff; } .box::last-child { margin-bottom: 0; } /* multi column */ .tb-layout { text-align: justify; text-justify: inter-ideograph; display: table; } .tb-layout > div, .tb-layout > li { vertical-align: top; display: table-cell; } /* micro clearfix ------------------------- */ .cf::after, .wrap::after, .header::after, .contents::after, .main::after, .cont-box::after, .cont-box__in::after, .cont-box__in-in::after, .cont-box__in-in-in::after, .footer::after { content:" "; display:block; clear:both; } /* --------------------------- unique --------------------------- */ /* ************************************ Media Queries **** pc,tablet **** ************************************ */ @media all and (min-width: 768px) { /* structure ------------------------- */ /* pc非表示 */ .smp { display: none !important; } } /* ************************************ Media Queries **** smp **** ************************************ */ @media all and (max-width: 767px) { body { font-size: 1.4rem; } /* fluid-img */ img, object { max-width: 100%; height: auto; } table { width: 100%; } /* structure ------------------------- */ /* smp非表示 */ .pc { display: none !important; } } /* ************************************ Media Queries **** smp -- iPhone4-5 **** ************************************ */ @media all and (max-width: 320px) { } /* ************************************ Media Queries **** 高解像度 **** ************************************ /* tablet ------------------------- */ @media screen and (max-width : 768px) and (-webkit-min-device-pixel-ratio: 1.5) { } /* smp ------------------------- */ @media screen and (max-width : 480px) and (-webkit-min-device-pixel-ratio: 1.5) { }