@charset "UTF-8";
@charset "UTF-8";
/*
#overview
/index.html
■トップページ
*/
/* ==================================================================
Definition ※必須
================================================================== */
/*
#overview
定義―Color Theme
色指定は全て以下の変数で指定して下さい。
*/
/*
#styleguide
Crimson red
$brand-primary: #bf0000;
$brand-light: #ff1212;
$brand-darker: #930a0a;
```
```
*/
/*
#styleguide
Life Insurance blue
$life-primary: #0783c2;
$life-light: #37b4f3;
$life-darker: #085b7c;
```
```
*/
/*
#styleguide
Gray scale color
$black: #000;
$gray-darkest: #333;
$gray-darker: #4d4d4d;
$gray-dark: #686868;
$gray: #828282;
$gray-medium: #9c9c9c;
$gray-medium-light: #b6b6b6;
$gray-light: #d1d1d1;
$gray-lighter: #ebebeb;
$gray-lightest: #f7f7f7;
$white: #fff;
```
```
*/
/*
#styleguide
System color - Text
$system-info-txt: #006497;
$system-success-txt: #047205;
$system-warning-txt: #9f4600;
$system-danger-txt: #df0101;
```
【インフォ】テキストインフォメーションカラーの文字列が入ります。$system-info-txtが文字色に指定されています。
【サクセス】テキストインフォメーションカラーの文字列が入ります。$system-success-txtが文字色に指定されています。
【警告】テキストインフォメーションカラーの文字列が入ります。$system-warning-txtが文字色に指定されています。
【危険】テキストインフォメーションカラーの文字列が入ります。$system-danger-txtが文字色に指定されています。
```
*/
/*
#styleguide
System color - Background
$system-info-bg: #ebf7fe;
$system-success-bg: #ebf7ec;
$system-warning-bg: #fef3eb;
$system-danger-bg: #fff0f0;
```
【インフォ】テキストインフォメーションカラーの文字列が入ります。$system-info-bgが背景色に指定されています。
【サクセス】テキストインフォメーションカラーの文字列が入ります。$system-success-bgが背景色に指定されています。
【警告】テキストインフォメーションカラーの文字列が入ります。$system-warning-bgが背景色に指定されています。
【危険】テキストインフォメーションカラーの文字列が入ります。$system-danger-bgが背景色に指定されています。
```
*/
/*
#styleguide
System color - Stroke
$system-info-stroke: #c1e6fa;
$system-success-stroke: #c2e6c2;
$system-warning-stroke: #fbdac1;
$system-danger-stroke: #ffcfcf;
```
【インフォ】テキストインフォメーションカラーの文字列が入ります。$system-info-strokeが線に指定されています。
【サクセス】テキストインフォメーションカラーの文字列が入ります。$system-success-strokeが線に指定されています。
【警告】テキストインフォメーションカラーの文字列が入ります。$system-warning-strokeが線に指定されています。
【危険】テキストインフォメーションカラーの文字列が入ります。$system-danger-strokeが線に指定されています。
```
*/
/*
#styleguide
Text link color
$lnk-txt: #094d95;
$lnk-txt-hover: #0b60bc;
$lnk-txt-active: #06396f;
```
テキストリンク
テキストリンク:focus
テキストリンク:hover
テキストリンク:active
```
*/
/*
#overview
定義―Variable
余白の指定・角丸・モーション(transition)は以下の変数を用いて指定してください。
*/
/*
#styleguide
space
$base-space: 8px;
■example01
margin-right: $base-space;
padding: $base-space;
■example02
margin-right: $base-space * 2;
padding: $base-space * 2;
```
- ■example01
-
- ■example02
-
```
*/
/*
#styleguide
radius
$base-radius: 4px;
```
```
*/
/*
#styleguide
box-shadow
$base-shadow: 0 5px 10px -5px rgba(0 , 0 , 0, .2);
```
```
*/
/*
#styleguide
transition
$standard-curve:cubic-bezier(0.25,0,0.45,1);
$deceleration-curve:cubic-bezier(0,0,0.55,1);
$acceleration-curve:cubic-bezier(0.45,0,1,1);
$sharp-curve:cubic-bezier(0.45,0,0.55,1);
```
参考使用モジュールをご確認ください。
```
*/
html {
font-size: 62.5%;
margin: 0;
padding: 0;
}
body {
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
font-size: 1.6em;
line-height: 1.7;
min-width: 1280px;
margin: 0;
padding: 0;
color: #333;
background: #fff;
}
h1, h2, h3, h4, h5, h6,
p, pre, address, blockquote, table,
ul, ol, dl, li, dt, dd, hr {
font-style: normal;
margin: 0;
padding: 0;
}
ul, ol {
list-style-type: none;
}
abbr, acronym, bdo, cite, code, dfn,
em, img, kbd, q, samp, span, strong, sub, sup, var {
font-style: normal;
}
em {
font-weight: bold;
font-style: normal;
}
strong {
font-weight: bold;
}
sub,
sup {
font-size: 11px;
font-size: 1.1rem;
position: relative;
vertical-align: baseline;
}
sub {
top: 4px;
}
sup {
top: -4px;
}
a {
text-decoration: none;
color: #085b7c;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
a:hover,
a:focus {
text-decoration: underline;
}
img {
line-height: 1;
vertical-align: bottom;
border: none;
}
q {
quotes: none;
}
ins {
text-decoration: underline;
}
del {
text-decoration: line-through;
}
form {
margin: 0;
padding: 0;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
label {
margin: 0;
padding: 0;
cursor: pointer;
border: none;
}
input {
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
margin: 0;
padding: 0;
}
input[type='image'],
input.image {
border: none;
}
optgroup {
font-style: normal;
}
textarea {
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
resize: none;
overflow: auto;
}
select {
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
margin: 0;
padding: 0;
}
button {
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
margin: 0;
padding: 0;
cursor: pointer;
}
button:active,
button img {
position: relative;
}
button::-moz-focus-inner {
padding: 0;
border: none;
}
h1, h2, h3, h4, h5, h6,
blockquote, div, ul, ol,
dl, dt, dd, table, th, td,
form, fieldset, legend, label {
zoom: 1;
}
ul li,
ol li {
zoom: normal;
}
article, aside, dialog, figure, main,
footer, header, hgroup, nav, section {
display: block;
zoom: 1;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
@media screen and (max-width: 756px) {
body {
min-width: auto;
}
a {
word-break: break-all;
}
}
@media screen and (max-width: 320px) {
html, body {
-webkit-text-size-adjust: 100%;
}
}
/* ==================================================================
Required ※サイト内全ページに必須のscss
================================================================== */
/*
#overview
必須モジュール―Icons
*/
/*
#styleguide
Group icons
```
```
*/
/*
#styleguide
Others icon
```
```
*/
@font-face {
font-family: rex-icon;
src: url("/assets/font/rex-icon.eot") format("embedded-opentype"), url("/assets/font/rex-icon.woff2") format("woff2"), url("/assets/font/rex-icon.rex-icon.woff") format("woff");
}
.rex-icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
display: inline-block;
font: normal 24px rex-icon;
}
.rex-icon.arrow-down-l:before {
content: "\F101";
}
.rex-icon.arrow-left-l:before {
content: "\F102";
}
.rex-icon.arrow-right:before {
content: "\F104";
}
.rex-icon.arrow-right-l:before {
content: "\F103";
}
.rex-icon.arrow-up-l:before {
content: "\F105";
}
.rex-icon.barcode-f:before {
content: "\F106";
}
.rex-icon.barcode-l:before {
content: "\F107";
}
.rex-icon.blockquote-left:before {
content: "\F108";
}
.rex-icon.blockquote-right:before {
content: "\F109";
}
.rex-icon.browsing-history-f:before {
content: "\F10A";
}
.rex-icon.browsing-history-l:before {
content: "\F10B";
}
.rex-icon.building-f:before {
content: "\F10C";
}
.rex-icon.building-l:before {
content: "\F10D";
}
.rex-icon.bus-f:before {
content: "\F10E";
}
.rex-icon.bus-l:before {
content: "\F10F";
}
.rex-icon.button-chevron-left-f:before {
content: "\F110";
}
.rex-icon.button-chevron-left-l:before {
content: "\F111";
}
.rex-icon.button-chevron-right-f:before {
content: "\F112";
}
.rex-icon.button-chevron-right-l:before {
content: "\F113";
}
.rex-icon.button-minus-f:before {
content: "\F114";
}
.rex-icon.button-minus-l:before {
content: "\F115";
}
.rex-icon.button-plus-f:before {
content: "\F116";
}
.rex-icon.button-plus-l:before {
content: "\F117";
}
.rex-icon.calculator-f:before {
content: "\F118";
}
.rex-icon.calculator-l:before {
content: "\F119";
}
.rex-icon.calendar-f:before {
content: "\F11A";
}
.rex-icon.calendar-l:before {
content: "\F11B";
}
.rex-icon.campaign-f:before {
content: "\F11C";
}
.rex-icon.campaign-l:before {
content: "\F11D";
}
.rex-icon.car-f:before {
content: "\F11E";
}
.rex-icon.car-l:before {
content: "\F11F";
}
.rex-icon.cart-f:before {
content: "\F120";
}
.rex-icon.cart-l:before {
content: "\F121";
}
.rex-icon.change-order-l:before {
content: "\F122";
}
.rex-icon.chat-f:before {
content: "\F123";
}
.rex-icon.chat-l:before {
content: "\F124";
}
.rex-icon.check:before {
content: "\F125";
}
.rex-icon.chevron-left:before {
content: "\F126";
}
.rex-icon.chevron-right:before {
content: "\F127";
}
.rex-icon.cloud-f:before {
content: "\F128";
}
.rex-icon.cloud-l:before {
content: "\F129";
}
.rex-icon.code-f:before {
content: "\F12A";
}
.rex-icon.code-l:before {
content: "\F12B";
}
.rex-icon.comment-f:before {
content: "\F12C";
}
.rex-icon.comment-l:before {
content: "\F12D";
}
.rex-icon.compare-f:before {
content: "\F12E";
}
.rex-icon.compare-l:before {
content: "\F12F";
}
.rex-icon.coupon-f:before {
content: "\F130";
}
.rex-icon.coupon-l:before {
content: "\F131";
}
.rex-icon.credit-card-f:before {
content: "\F132";
}
.rex-icon.credit-card-l:before {
content: "\F133";
}
.rex-icon.currency-f:before {
content: "\F134";
}
.rex-icon.currency-l:before {
content: "\F135";
}
.rex-icon.delete-f:before {
content: "\F136";
}
.rex-icon.delete-l:before {
content: "\F137";
}
.rex-icon.delivery-f:before {
content: "\F138";
}
.rex-icon.delivery-l:before {
content: "\F139";
}
.rex-icon.desktop-f:before {
content: "\F13A";
}
.rex-icon.desktop-l:before {
content: "\F13B";
}
.rex-icon.domestic-area-f:before {
content: "\F13C";
}
.rex-icon.domestic-area-l:before {
content: "\F13D";
}
.rex-icon.download-f:before {
content: "\F13E";
}
.rex-icon.download-l:before {
content: "\F13F";
}
.rex-icon.external-link-l:before {
content: "\F140";
}
.rex-icon.eye-ban-f:before {
content: "\F141";
}
.rex-icon.eye-ban-l:before {
content: "\F142";
}
.rex-icon.eye-f:before {
content: "\F143";
}
.rex-icon.eye-l:before {
content: "\F144";
}
.rex-icon.favorite-half-f:before {
content: "\F146";
}
.rex-icon.favorite-f:before {
content: "\F145";
}
.rex-icon.favorite-l:before {
content: "\F147";
}
.rex-icon.ferry-f:before {
content: "\F148";
}
.rex-icon.ferry-l:before {
content: "\F149";
}
.rex-icon.fill-color-f:before {
content: "\F14A";
}
.rex-icon.fill-color-l:before {
content: "\F14B";
}
.rex-icon.folder-f:before {
content: "\F14C";
}
.rex-icon.folder-l:before {
content: "\F14D";
}
.rex-icon.gift-f:before {
content: "\F14E";
}
.rex-icon.gift-l:before {
content: "\F14F";
}
.rex-icon.heart-f:before {
content: "\F150";
}
.rex-icon.heart-l:before {
content: "\F151";
}
.rex-icon.home-f:before {
content: "\F152";
}
.rex-icon.home-l:before {
content: "\F153";
}
.rex-icon.image-f:before {
content: "\F154";
}
.rex-icon.image-l:before {
content: "\F155";
}
.rex-icon.keyboard-f:before {
content: "\F156";
}
.rex-icon.keyboard-l:before {
content: "\F157";
}
.rex-icon.language-f:before {
content: "\F158";
}
.rex-icon.language-l:before {
content: "\F159";
}
.rex-icon.laptop-f:before {
content: "\F15A";
}
.rex-icon.laptop-l:before {
content: "\F15B";
}
.rex-icon.like-f:before {
content: "\F15C";
}
.rex-icon.like-l:before {
content: "\F15D";
}
.rex-icon.list-f:before {
content: "\F15E";
}
.rex-icon.list-l:before {
content: "\F15F";
}
.rex-icon.loading-l:before {
content: "\F160";
}
.rex-icon.loading-lg-l:before {
content: "\F161";
}
.rex-icon.location-f:before {
content: "\F162";
}
.rex-icon.location-l:before {
content: "\F163";
}
.rex-icon.login-l:before {
content: "\F164";
}
.rex-icon.logo:before {
content: "\F165";
}
.rex-icon.logout-l:before {
content: "\F166";
}
.rex-icon.lucky-kuji-f:before {
content: "\F167";
}
.rex-icon.lucky-kuji-l:before {
content: "\F168";
}
.rex-icon.mail-f:before {
content: "\F169";
}
.rex-icon.mail-l:before {
content: "\F16A";
}
.rex-icon.map-f:before {
content: "\F16B";
}
.rex-icon.map-l:before {
content: "\F16C";
}
.rex-icon.menu:before {
content: "\F16D";
}
.rex-icon.minus:before {
content: "\F16E";
}
.rex-icon.mobile-phone-f:before {
content: "\F16F";
}
.rex-icon.mobile-phone-l:before {
content: "\F170";
}
.rex-icon.movie-f:before {
content: "\F171";
}
.rex-icon.movie-l:before {
content: "\F172";
}
.rex-icon.my-page-f:before {
content: "\F173";
}
.rex-icon.my-page-l:before {
content: "\F174";
}
.rex-icon.new-user-f:before {
content: "\F175";
}
.rex-icon.new-window-f:before {
content: "\F176";
}
.rex-icon.new-window-l:before {
content: "\F177";
}
.rex-icon.notice-generic-f:before {
content: "\F178";
}
.rex-icon.notice-generic-l:before {
content: "\F179";
}
.rex-icon.notice-user-f:before {
content: "\F17A";
}
.rex-icon.notice-user-l:before {
content: "\F17B";
}
.rex-icon.overflow-button:before {
content: "\F17C";
}
.rex-icon.paint-f:before {
content: "\F17D";
}
.rex-icon.paint-l:before {
content: "\F17E";
}
.rex-icon.paper-plane-f:before {
content: "\F17F";
}
.rex-icon.paper-plane-l:before {
content: "\F180";
}
.rex-icon.pdf-f:before {
content: "\F181";
}
.rex-icon.pdf-l:before {
content: "\F182";
}
.rex-icon.phone-f:before {
content: "\F183";
}
.rex-icon.phone-l:before {
content: "\F184";
}
.rex-icon.photograph-f:before {
content: "\F185";
}
.rex-icon.photograph-l:before {
content: "\F186";
}
.rex-icon.pin-f:before {
content: "\F187";
}
.rex-icon.pin-l:before {
content: "\F188";
}
.rex-icon.plane-f:before {
content: "\F189";
}
.rex-icon.plane-l:before {
content: "\F18A";
}
.rex-icon.plus:before {
content: "\F18B";
}
.rex-icon.point-f:before {
content: "\F18C";
}
.rex-icon.point-l:before {
content: "\F18D";
}
.rex-icon.price-f:before {
content: "\F18E";
}
.rex-icon.price-l:before {
content: "\F18F";
}
.rex-icon.print-f:before {
content: "\F190";
}
.rex-icon.print-l:before {
content: "\F191";
}
.rex-icon.purchase-history-f:before {
content: "\F192";
}
.rex-icon.purchase-history-l:before {
content: "\F193";
}
.rex-icon.qrcode-f:before {
content: "\F194";
}
.rex-icon.qrcode-l:before {
content: "\F195";
}
.rex-icon.rakuten-account-f:before {
content: "\F196";
}
.rex-icon.rakuten-account-l:before {
content: "\F197";
}
.rex-icon.rakuten-close-account-f:before {
content: "\F198";
}
.rex-icon.rakuten-close-account-l:before {
content: "\F199";
}
.rex-icon.rakuten-registration-f:before {
content: "\F19A";
}
.rex-icon.rakuten-registration-l:before {
content: "\F19B";
}
.rex-icon.ranking-f:before {
content: "\F19C";
}
.rex-icon.ranking-l:before {
content: "\F19D";
}
.rex-icon.refresh:before {
content: "\F19E";
}
.rex-icon.review-comment-f:before {
content: "\F19F";
}
.rex-icon.review-comment-l:before {
content: "\F1A0";
}
.rex-icon.review-edit-f:before {
content: "\F1A1";
}
.rex-icon.review-edit-l:before {
content: "\F1A2";
}
.rex-icon.rss-symbol-l:before {
content: "\F1A3";
}
.rex-icon.rss-text-f:before {
content: "\F1A4";
}
.rex-icon.rss-text-l:before {
content: "\F1A5";
}
.rex-icon.save-f:before {
content: "\F1A6";
}
.rex-icon.save-l:before {
content: "\F1A7";
}
.rex-icon.search-history-f:before {
content: "\F1A8";
}
.rex-icon.search-history-l:before {
content: "\F1A9";
}
.rex-icon.search:before {
content: "\F1AA";
}
.rex-icon.security-f:before {
content: "\F1AB";
}
.rex-icon.security-l:before {
content: "\F1AC";
}
.rex-icon.server-f:before {
content: "\F1AD";
}
.rex-icon.server-l:before {
content: "\F1AE";
}
.rex-icon.settings-f:before {
content: "\F1AF";
}
.rex-icon.settings-l:before {
content: "\F1B0";
}
.rex-icon.share-f:before {
content: "\F1B1";
}
.rex-icon.share-l:before {
content: "\F1B2";
}
.rex-icon.shop-f:before {
content: "\F1B3";
}
.rex-icon.shop-l:before {
content: "\F1B4";
}
.rex-icon.sign-ban-f:before {
content: "\F1B5";
}
.rex-icon.sign-ban-l:before {
content: "\F1B6";
}
.rex-icon.sign-help-f:before {
content: "\F1B7";
}
.rex-icon.sign-help-l:before {
content: "\F1B8";
}
.rex-icon.sign-info-f:before {
content: "\F1B9";
}
.rex-icon.sign-info-l:before {
content: "\F1BA";
}
.rex-icon.sign-warning-f:before {
content: "\F1BB";
}
.rex-icon.sign-warning-l:before {
content: "\F1BC";
}
.rex-icon.sliders-f:before {
content: "\F1BD";
}
.rex-icon.sliders-l:before {
content: "\F1BE";
}
.rex-icon.smartphone-f:before {
content: "\F1BF";
}
.rex-icon.smartphone-l:before {
content: "\F1C0";
}
.rex-icon.survey-f:before {
content: "\F1C1";
}
.rex-icon.survey-l:before {
content: "\F1C2";
}
.rex-icon.switch-language-f:before {
content: "\F1C3";
}
.rex-icon.switch-language-l:before {
content: "\F1C4";
}
.rex-icon.tablet-f:before {
content: "\F1C5";
}
.rex-icon.tablet-l:before {
content: "\F1C6";
}
.rex-icon.tag-f:before {
content: "\F1C7";
}
.rex-icon.tag-l:before {
content: "\F1C8";
}
.rex-icon.test:before {
content: "\F1C9";
}
.rex-icon.time-f:before {
content: "\F1CA";
}
.rex-icon.time-l:before {
content: "\F1CB";
}
.rex-icon.train-f:before {
content: "\F1CC";
}
.rex-icon.train-l:before {
content: "\F1CD";
}
.rex-icon.upload-f:before {
content: "\F1CE";
}
.rex-icon.upload-l:before {
content: "\F1CF";
}
.rex-icon.voice-input-f:before {
content: "\F1D0";
}
.rex-icon.voice-input-l:before {
content: "\F1D1";
}
.rex-icon.walking-f:before {
content: "\F1D2";
}
.rex-icon.world-f:before {
content: "\F1D3";
}
.rex-icon.world-l:before {
content: "\F1D4";
}
.rex-icon.x:before {
content: "\F1D5";
}
.rex-icon.zip-f:before {
content: "\F1D6";
}
.rex-icon.zip-l:before {
content: "\F1D7";
}
.rex-icon.zoom-in-f:before {
content: "\F1D8";
}
.rex-icon.zoom-in-l:before {
content: "\F1D9";
}
.rex-icon.zoom-out-f:before {
content: "\F1DA";
}
.rex-icon.zoom-out-l:before {
content: "\F1DB";
}
/* ==================================================================
Custom for rex-icon
================================================================== */
.rex-icon.chevron-top {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rex-icon.chevron-top:before {
content: "\F127";
}
.rex-icon.chevron-bottom {
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
}
.rex-icon.chevron-bottom:before {
content: "\F127";
}
/*
#styleguide
Social icon
.iconSocial.iconSocial_fb - Facebook
.iconSocial.iconSocial_tw - Twitter
.iconSocial.iconSocial_ln - LINE
```
```
*/
.iconSocial {
display: inline-block;
}
.iconSocial::before {
display: inline-block;
width: 40px;
height: 40px;
content: "";
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 0 0;
}
.iconSocial.iconSocial_fb::before {
content: "";
background-image: url(/assets/img/icon/ico_facebook.svg);
background-size: 40px 40px;
}
.iconSocial.iconSocial_tw::before {
content: "";
background-image: url(/assets/img/icon/ico_twitter.svg);
background-size: 40px 40px;
}
.iconSocial.iconSocial_ln::before {
content: "";
background-image: url(/assets/img/icon/ico_line.svg);
background-size: 40px 40px;
}
/*
#styleguide
Service Icon - Specific Sprite
※1 png形式のスプライト画像です。【WIP】
※2 chromeとfirefoxにおいて、「rex-icon menu」がfont-sizeによって、真ん中のラインが太くなるバグがある為、「service-icon service-icon_menu」を用意。
.service-icon.service-icon_bed
.service-icon.service-icon_bedHover
.service-icon.service-icon_bedActive
.service-icon.service-icon_box
.service-icon.service-icon_boxHover
.service-icon.service-icon_boxActive
.service-icon.service-icon_cancer
.service-icon.service-icon_cancerHover
.service-icon.service-icon_cancerActive
.service-icon.service-icon_heart
.service-icon.service-icon_heartHover
.service-icon.service-icon_heartActive
.service-icon.service-icon_blank
.service-icon.service-icon_blankHover
.service-icon.service-icon_blankActive
.service-icon.service-icon_blankLife
.service-icon.service-icon_blankLifeHover
.service-icon.service-icon_blankLifeActive
.service-icon.service-icon_menu
```
```
*/
.service-icon {
display: inline-block;
background-image: url("/assets/img/icon/ico_service_sprite.png");
background-size: 664px 640px;
background-repeat: no-repeat;
vertical-align: bottom;
}
.service-icon.service-icon_bed {
background-position: -160px 0px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_bedHover {
background-position: -160px -160px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_bedActive {
background-position: -160px -480px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_box {
background-position: -480px -320px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_boxHover {
background-position: -320px -480px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_boxActive {
background-position: 0px -480px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_cancer {
background-position: -480px -480px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_cancerHover {
background-position: -320px -320px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_cancerActive {
background-position: -480px -160px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_heart {
background-position: -160px -320px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_heartHover {
background-position: -320px 0px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_heartActive {
background-position: 0px -320px;
width: 160px;
height: 160px;
}
.service-icon.service-icon_blank {
background-position: -640px -127px;
width: 14px;
height: 12px;
}
.service-icon.service-icon_blankHover {
background-position: -640px -103px;
width: 14px;
height: 12px;
}
.service-icon.service-icon_blankActive {
background-position: -640px -115px;
width: 14px;
height: 12px;
}
.service-icon.service-icon_blankLife {
background-position: -640px -91px;
width: 14px;
height: 12px;
}
.service-icon.service-icon_blankLifeHover {
background-position: -640px -67px;
width: 14px;
height: 12px;
}
.service-icon.service-icon_blankLifeActive {
background-position: -640px -79px;
width: 14px;
height: 12px;
}
.service-icon.service-icon_menu {
background-position: -640px 0px;
width: 24px;
height: 24px;
}
/*
#overview
Group Header
*/
/*
#styleguide
Group Header
*/
/* header
---------------------------- */
#grpheader {
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
}
#grpheader #grpheader {
width: 950px;
height: 130px;
margin: 0px auto;
position: relative;
background: none;
}
#grpheader #grpheader h1 {
/* display:none; */
}
#grpheader #grpheader #siteID {
position: relative;
}
#grpheader #grpheader #siteID .serviceLogo {
position: absolute;
top: 20px;
left: 7px;
}
#grpheader #grpheader #siteID .serviceTitle {
position: absolute;
top: 26px;
left: 109px;
}
#grpheader #grpheader #siteID .serviceTitle a {
color: #bf0000;
font-weight: bold;
font-size: 166%;
}
#grpheader #grpheader #siteID .serviceTitle a:hover {
text-decoration: none;
}
#g03 #grpheader #grpheader {
width: 950px;
height: 58px;
margin: 0px auto;
position: relative;
background: none;
}
#g03 #grpheader #grpheader #siteID .serviceLogo {
position: absolute;
top: 0px;
left: 0px;
}
#g03 #grpheader #grpheader #siteID .serviceTitle {
position: absolute;
top: 13px;
left: 108px;
}
/*
Rakuten Common Header
Version: 0.1.4
*/
/*
* Skin
* The custom styles go here.
*/
/* Contents Width */
#grpheader .rc-h-inner {
width: initial;
margin: initial;
}
/* Minimum Contents Width */
#grpheader, #grpheader.rc-h-liquid .rc-h-noscript-bar,
#grpheader.rc-h-liquid .rc-h-utility-bar,
#grpheader.rc-h-liquid .rc-h-service-bar {
min-width: 950px;
}
/* Base Text Style */
#grpheader {
font-size: 12px;
line-height: 1.6;
}
/* Base Font Color */
#grpheader, #grpheader a:link,
#grpheader a:visited,
#grpheader a:hover,
#grpheader a:active {
color: #333;
}
/* Skin Font Color */
/* Skin Border Color */
/* Skin Background Color */
/* Skin Highlight Background Color */
#grpheader .rc-h-genre-dropdown:hover > a,
#grpheader .rc-h-genre-dropdown.rc-h-hover > a {
background-color: #003bb3;
}
/* Action Button Color */
#grpheader .rc-h-action-nav .rc-h-action-btn.rc-h-marketspeed-action {
background-color: #01154d;
}
#grpheader .rc-h-action-nav .rc-h-action-btn.rc-h-ispeed-action {
background-color: #000000;
}
/*
Icon classes can be used entirely standalone. They are named after their original file names.
```html
```
*/
.rc-h-icon-browse {
background-image: url(../../img/rc-h-sprites.png);
background-position: 0px -22px;
width: 18px;
height: 18px;
}
.rc-h-icon-cart-white {
background-image: url(../../img/rc-h-sprites.png);
background-position: 0px 0px;
width: 20px;
height: 20px;
}
.rc-h-icon-cart {
background-image: url(../../img/rc-h-sprites.png);
background-position: -22px 0px;
width: 20px;
height: 20px;
}
.rc-h-icon-favorite {
background-image: url(../../img/rc-h-sprites.png);
background-position: -20px -22px;
width: 18px;
height: 18px;
}
.rc-h-icon-purchase {
background-image: url(../../img/rc-h-sprites.png);
background-position: -44px 0px;
width: 18px;
height: 18px;
}
/* Dropdown Module */
#grpheader .rc-h-dropdown {
position: relative;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
margin: 0;
padding: 1px;
background: #fff;
border: 1px solid #cccccc;
z-index: 12;
white-space: nowrap;
-webkit-box-shadow: 1px 1px 2px 0 #cecece;
box-shadow: 1px 1px 2px 0 #cecece;
display: none;
top: 100%;
left: 0;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li {
position: relative;
float: none;
margin: 0;
padding: 0;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li > a,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li > span {
display: block;
position: relative;
padding: 4px 14px 4px 10px;
cursor: pointer;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li:hover > a,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li:hover > span,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-hover > a,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-hover > span,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-active > a,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-active > span,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li a.rc-h-active,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li span.rc-h-active {
background: #f6f6f6;
color: #000000;
text-decoration: none;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child > a,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child > span {
padding-right: 28px;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child > a:after,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child > span:after {
position: absolute;
top: 50%;
right: 8px;
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-top-width: 4px;
border-right-width: 0;
border-bottom-width: 4px;
border-left-width: 4px;
border-color: transparent transparent transparent #686868;
margin-top: -4px;
vertical-align: middle;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child > .rc-h-dropdown-panel {
display: none;
top: 0;
left: 100%;
margin-left: -5px;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child:hover > a:after,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child:hover > span:after,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child.rc-h-hover > a:after,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child.rc-h-hover > span:after {
border-left-color: #f2ab00;
}
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child:hover > .rc-h-dropdown-panel,
#grpheader .rc-h-dropdown .rc-h-dropdown-panel > li.rc-h-dropdown-child.rc-h-hover > .rc-h-dropdown-panel {
display: block;
}
#grpheader .rc-h-dropdown:hover .rc-h-dropdown-panel,
#grpheader .rc-h-dropdown.rc-h-hover .rc-h-dropdown-panel {
display: block;
}
/* Combobox Module */
#grpheader .rc-h-combobox-module {
position: relative;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-label {
position: relative;
padding: 0 22px 0 8px;
background: #fff;
line-height: 26px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-label:after {
position: absolute;
top: 50%;
right: 8px;
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 0;
border-left-width: 4px;
border-color: #686868 transparent transparent transparent;
margin-top: -2px;
vertical-align: middle;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
margin: 0;
padding: 1px;
background: #fff;
border: 1px solid #cccccc;
z-index: 12;
white-space: nowrap;
-webkit-box-shadow: 1px 1px 2px 0 #cecece;
box-shadow: 1px 1px 2px 0 #cecece;
overflow-y: scroll;
overflow-x: hidden;
display: none;
min-width: 100%;
max-height: 280px;
top: 100%;
left: 0;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li {
position: relative;
float: none;
margin: 0;
padding: 0;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li > a,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li > span {
display: block;
position: relative;
padding: 4px 14px 4px 10px;
cursor: pointer;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li:hover > a,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li:hover > span,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-hover > a,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-hover > span,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-active > a,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-active > span,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li a.rc-h-active,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li span.rc-h-active {
background: #f6f6f6;
color: #000;
text-decoration: none;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child > a,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child > span {
padding-right: 28px;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child > a:after,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child > span:after {
position: absolute;
top: 50%;
right: 8px;
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-top-width: 4px;
border-right-width: 0;
border-bottom-width: 4px;
border-left-width: 4px;
border-color: transparent transparent transparent #686868;
margin-top: -4px;
vertical-align: middle;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child > .rc-h-dropdown-panel {
display: none;
top: 0;
left: 100%;
margin-left: -5px;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child:hover > a:after,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child:hover > span:after,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child.rc-h-hover > a:after,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child.rc-h-hover > span:after {
border-left-color: #f2ab00;
}
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child:hover > .rc-h-dropdown-panel,
#grpheader .rc-h-combobox-module .rc-h-combobox-panel > li.rc-h-dropdown-child.rc-h-hover > .rc-h-dropdown-panel {
display: block;
}
* + html #grpheader .rc-h-combobox-module .rc-h-combobox-panel {
margin-top: -4px;
}
#grpheader .rc-h-combobox-module:hover .rc-h-combobox-label:after {
border-top-color: #f2ab00;
}
#grpheader .rc-h-combobox-module.rc-h-active .rc-h-combobox-panel {
display: block;
}
/* Main */
#grpheader a {
text-decoration: none;
}
#grpheader a img {
border: none;
}
#grpheader a:hover {
text-decoration: underline;
}
#grpheader li {
list-style: none;
}
#grpheader.rc-h-liquid .rc-h-noscript-bar,
#grpheader.rc-h-liquid .rc-h-utility-bar,
#grpheader.rc-h-liquid .rc-h-service-bar {
padding-left: 10px;
padding-right: 10px;
}
#grpheader.rc-h-liquid .rc-h-inner {
width: auto;
}
#grpheader .rc-h-noscript-bar {
padding: 3px 0 2px;
border-top: 2px solid #d8b6b6;
border-bottom: 2px solid #d8b6b6;
background: #faeaea;
color: #b03434;
}
#grpheader .rc-h-noscript-bar p {
margin: 0;
padding: 0;
text-align: center;
}
#grpheader .rc-h-noscript-bar a:link,
#grpheader .rc-h-noscript-bar a:visited,
#grpheader .rc-h-noscript-bar a:hover,
#grpheader .rc-h-noscript-bar a:active {
color: #bf0000;
}
#grpheader .rc-h-utility-bar {
position: relative;
z-index: 10;
background: #f9f9f9;
}
#grpheader .rc-h-utility-bar .rc-h-inner {
width: 1280px;
margin: 0 auto;
padding: 0 104px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#grpheader .rc-h-group-nav {
float: right;
margin: 0;
padding: 0;
}
#grpheader .rc-h-group-nav li {
position: relative;
float: left;
text-align: left;
}
#grpheader .rc-h-group-nav li a {
display: block;
padding: 3px 10px;
color: #515151;
}
#grpheader .rc-h-group-nav li a:hover {
text-decoration: none;
}
#grpheader .rc-h-group-nav li:hover,
#grpheader .rc-h-group-nav li.rc-h-hover {
background: #f0f0f0;
}
#grpheader .rc-h-group-dropdown > a:after {
display: inline-block;
content: "";
margin-left: 5px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 0;
border-left-width: 4px;
border-color: #686868 transparent transparent transparent;
margin-top: -2px;
vertical-align: middle;
}
#grpheader .rc-h-group-dropdown .rc-h-dropdown-panel {
left: auto;
right: 0;
}
#grpheader .rc-h-group-dropdown:hover > a:after,
#grpheader .rc-h-group-dropdown.rc-h-hover > a:after {
border-top-color: #333;
}
#grpheader .rc-h-service-bar {
padding-bottom: 0;
background: #fff;
}
#grpheader .rc-h-service-bar-inner {
position: relative;
}
#grpheader .rc-h-service-bar-inner .rc-h-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 1074px;
height: 64px;
margin: 0 auto;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#grpheader.simpleHeader01 .rc-h-service-bar {
padding-top: 10px;
}
#grpheader .rc-h-service-bar img {
vertical-align: top;
}
#grpheader .rc-h-site-id {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
height: 100%;
}
#grpheader .rc-h-title,
#grpheader .rc-h-icon {
display: inline-block;
vertical-align: middle;
}
#grpheader .rc-h-site-id-logo {
height: 32px;
}
#grpheader .rc-h-site-id-logo img {
vertical-align: top;
}
#grpheader .header-btn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 64px;
height: 100%;
margin-left: -20px;
margin-right: 0px;
padding: 0 30px 0 0;
cursor: pointer;
}
#grpheader .header-btn .rex-icon {
vertical-align: middle;
}
.header-btn_icon .rex-icon.x {
display: none;
}
* + html #grpheader .rc-h-logo, * + html #grpheader .rc-h-title, * + html #grpheader .rc-h-icon {
display: inline;
zoom: 1;
}
#grpheader .rc-h-site-id-logo .rc-h-txt {
font-size: 12px;
font-weight: normal;
display: inline-block;
margin-left: 20px;
vertical-align: middle;
}
#grpheader .rc-h-txt-wrap {
border-top: 1px solid #eaeaea;
}
#grpheader .rc-h-txt-wrap .rc-h-txt {
display: block;
padding: 7px 10px;
text-align: left;
font-size: 12px;
max-width: 1074px;
margin: 0 auto;
}
@media screen and (max-width: 756px) {
#grpheader .rc-h-site-id-logo .rc-h-txt {
display: none;
}
}
#grpheader .rc-h-title a:hover {
text-decoration: none;
}
#grpheader .rc-h-title a span {
font-size: 20px;
color: #bf0000;
font-weight: bold;
}
#grpheader .rc-h-site-menu ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#grpheader .rc-h-site-menu ul li {
margin-left: 35px;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list {
position: relative;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list[data-added='true'] > a > i:after {
position: absolute;
content: '';
background-color: #bf0000;
border-radius: 50%;
top: -4px;
right: -4px;
width: 16px;
height: 16px;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown {
position: absolute;
top: 66px;
left: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 14;
min-width: 194px;
padding: 25px 0 35px;
border: 1px solid transparent;
background-color: #fff;
display: none;
opacity: 0;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
-webkit-transition: all .2s ease .2s;
transition: all .2s ease .2s;
padding: 24px 0;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul {
margin: 0 auto;
display: inline-block;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li {
margin-left: 0;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li a {
padding: 0 0 16px;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li a i {
position: relative;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li a i[data-added="true"]:after {
position: absolute;
content: '';
background-color: #bf0000;
border-radius: 50%;
top: -4px;
right: -4px;
width: 16px;
height: 16px;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li a i.faq-icon {
display: inline-block;
margin-right: 5px;
width: 24px;
height: 24px;
background-image: url(/assets/img/icon/ico_faq03.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all .3s;
transition: all .3s;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li a i.book-icon {
position: relative;
display: inline-block;
margin-right: 5px;
width: 24px;
height: 24px;
background-image: url(/assets/img/icon/ico_book.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all .3s;
transition: all .3s;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li a:hover i.faq-icon {
background-image: url(/assets/img/icon/ico_faq_b.png);
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li a:hover i.book-icon {
background-image: url(/assets/img/icon/ico_book_b.png);
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list .gnavPullDown ul li:last-child a {
padding-bottom: 0;
}
#grpheader .rc-h-site-menu ul li.rc-h-site-menu-list:hover .gnavPullDown {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-animation-name: gnaviDropBox;
animation-name: gnaviDropBox;
-webkit-animation-delay: .5s;
animation-delay: .5s;
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
cursor: default;
}
#grpheader .rc-h-site-menu ul li a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
padding: 22px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
#grpheader .rc-h-site-menu ul li a:hover, #grpheader .rc-h-site-menu ul li a:focus {
color: #37b4f3;
text-decoration: none;
}
#grpheader .rc-h-site-menu ul li a:active {
color: #37b4f3;
text-decoration: none;
}
#grpheader .rc-h-site-menu ul li a.gnaviSearchWindowBtn[aria-selected=true] {
color: #37b4f3;
}
#grpheader .rc-h-site-menu ul li .rex-icon {
margin-right: 5px;
font-size: 24px;
}
#grpheader .rc-h-site-menu ul li .rc-h-site-txt {
font-size: 14px;
}
#grpheader .rc-h-menu-btns {
position: relative;
text-align: right;
}
#grpheader .rc-h-help-nav {
margin: 0;
padding: 0;
text-align: right;
}
#grpheader .rc-h-help-nav a:link,
#grpheader .rc-h-help-nav a:visited,
#grpheader .rc-h-help-nav a:hover,
#grpheader .rc-h-help-nav a:active {
color: #0033cc;
}
#grpheader .rc-h-help-nav li {
display: inline;
margin-left: 15px;
}
#grpheader .rc-h-action-nav {
float: left;
display: block;
margin: 13px 0;
padding: 0;
font-size: 16px;
line-height: 16px;
}
* + html #grpheader .rc-h-action-nav {
display: inline;
zoom: 1;
}
* + html #grpheader .rc-h-action-nav {
margin-left: 4px;
}
#grpheader .rc-h-action-nav li {
display: inline-block;
margin-right: 24px;
padding-left: 0;
}
* + html #grpheader .rc-h-action-nav li {
display: inline;
zoom: 1;
}
* + html #grpheader .rc-h-action-nav li {
margin-left: 4px;
}
#grpheader .rc-h-action-nav li a {
text-decoration: none;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
#grpheader .rc-h-action-nav li a:hover, #grpheader .rc-h-action-nav li a:focus {
color: #ff1212;
}
#grpheader .rc-h-action-nav li a:active {
color: #960000;
}
#grpheader .rc-h-search-area {
float: left;
display: block;
margin-top: 0;
padding-left: 0;
vertical-align: bottom;
}
* + html #grpheader .rc-h-search-area {
display: inline;
zoom: 1;
}
* + html #grpheader .rc-h-search-area {
margin-left: 4px;
}
#grpheader .rc-h-search-area .rc-h-search-txt {
font-size: 117%;
width: 123px;
height: 28px;
padding: 0 0 0 10px;
border: 1px solid #069;
border-right: none;
}
#grpheader .rc-h-search-area .rc-h-search-btn {
overflow: hidden;
width: 40px;
height: 30px;
margin: 0;
padding: 0;
cursor: pointer;
vertical-align: bottom;
white-space: nowrap;
text-indent: 100%;
border: none;
background: #069 url("/assets/img/ico_search_01.png") 50% 50% no-repeat;
}
#grpheader .rc-h-search-area .rc-h-search-btn:active {
position: relative;
}
#grpheader .rc-h-search-area .rc-h-search-btn:hover {
background-color: #3385ad;
}
#grpheader .rc-h-search-area .rc-h-search-btn::-moz-focus-inner {
padding: 0;
border: none;
}
#grpheader .rc-h-action-nav .rc-h-btn-icon {
display: inline-block;
margin-right: 4px;
vertical-align: middle;
}
* + html #grpheader .rc-h-action-nav .rc-h-btn-icon {
display: inline;
zoom: 1;
}
#grpheader .rc-h-action-nav .rc-h-btn-label {
display: inline-block;
vertical-align: middle;
}
* + html #grpheader .rc-h-action-nav .rc-h-btn-label {
display: inline;
zoom: 1;
}
#grpheader .rc-h-action-nav .rc-h-action-btn {
font-size: 117%;
display: inline-block;
padding: 3px 11px 2px;
cursor: pointer;
border-width: 1px;
border-style: solid;
border-color: #ccc;
}
* + html #grpheader .rc-h-action-nav .rc-h-action-btn {
display: inline;
zoom: 1;
}
#grpheader .rc-h-action-nav .rc-h-action-btn:hover .rc-h-btn-label {
text-decoration: underline;
}
#grpheader .rc-h-action-nav .rc-h-action-btn.rc-h-strong-action {
font-weight: bold;
color: #ffffff;
}
#grpheader .rc-h-action-nav .rc-h-btn-group {
display: inline-block;
margin: 0;
padding: 3px 3px 3px 7px;
border: 1px solid #cccccc;
}
#grpheader .rc-h-action-nav .rc-h-btn-group {
display: inline-block;
margin: 0;
padding: 3px 3px 3px 7px;
border: 1px solid #cccccc;
}
* + html #grpheader .rc-h-action-nav .rc-h-btn-group {
display: inline;
zoom: 1;
}
#grpheader .rc-h-action-nav .rc-h-btn-group .rc-h-action-btn {
padding: 0 4px;
border: none;
}
#grpheader .rc-h-action-nav .rc-h-btn-group .rc-h-action-btn:link, #grpheader .rc-h-action-nav .rc-h-btn-group .rc-h-action-btn:visited, #grpheader .rc-h-action-nav .rc-h-btn-group .rc-h-action-btn:hover, #grpheader .rc-h-action-nav .rc-h-btn-group .rc-h-action-btn:active {
color: white;
}
#grpheader .rc-h-promotion {
float: left;
margin-top: 4px;
padding-left: 10px;
vertical-align: bottom;
}
#grpheader .rc-h-genre-dropdown {
float: left;
margin-right: 15px;
z-index: 11;
}
#grpheader .rc-h-genre-dropdown > a {
display: block;
padding: 0 13px;
line-height: 44px;
font-weight: bold;
}
#grpheader .rc-h-genre-dropdown > a:link,
#grpheader .rc-h-genre-dropdown > a:visited,
#grpheader .rc-h-genre-dropdown > a:hover,
#grpheader .rc-h-genre-dropdown > a:active {
color: white;
}
#grpheader .rc-h-genre-dropdown > a:after {
display: inline-block;
content: "";
margin-left: 5px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 0;
border-left-width: 4px;
border-color: white transparent transparent transparent;
margin-top: -2px;
vertical-align: middle;
}
#grpheader .rc-h-genre-dropdown:hover > a,
#grpheader .rc-h-genre-dropdown.rc-h-hover > a {
text-decoration: none;
}
#grpheader .rc-h-gnavi {
position: relative;
border-top: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#grpheader .rc-h-gnavi .rc-h-inner {
position: static;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 1072px;
margin: 0 auto;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#grpheader .rc-h-gnavi .rc-h-inner li {
display: block;
font-size: inherit;
line-height: inherit;
text-align: inherit;
}
#grpheader .rc-h-gnavi .rc-h-inner li a {
padding: 0;
display: inline;
}
#grpheader .rc-h-gnavi .rc-h-inner li a:hover {
background-color: transparent;
}
#grpheader .rc-h-gnavi .rc-h-inner > li {
font-size: 20px;
line-height: 20px;
font-weight: 400;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.nav_clone {
display: none;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a {
position: relative;
height: 64px;
padding: 22px 34px;
color: #333;
letter-spacing: 0.06em;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
vertical-align: bottom;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a::after {
position: absolute;
bottom: -1px;
left: 0;
display: block;
content: "";
width: 0;
height: 1px;
-webkit-transition: width 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: width 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
#grpheader .rc-h-gnavi .rc-h-inner > li:not([aria-label=forMobile]):hover > a {
color: #ff1212;
text-decoration: none;
}
#grpheader .rc-h-gnavi .rc-h-inner > li:not([aria-label=forMobile]):hover > a::after {
width: 100%;
background-color: #ff1212;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.current:not([aria-label=forMobile]) > a {
color: #bf0000;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.current:not([aria-label=forMobile]) > a::after {
width: 100%;
background-color: #bf0000;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a:hover {
text-decoration: none;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a:focus {
text-decoration: none;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a:active {
color: #960000;
-webkit-transition: initial;
transition: initial;
text-decoration: none;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a:active::after {
width: 100%;
background-color: #960000;
-webkit-transition: initial;
transition: initial;
}
#grpheader .rc-h-gnavi .rc-h-inner > li:first-child > a {
width: 60px;
padding: 20px 0;
letter-spacing: 0;
margin-left: -20px;
}
#grpheader .rc-h-gnavi .rc-h-inner > li:first-child > a::after {
display: none;
}
#grpheader .rc-h-fixed-bar {
position: fixed;
z-index: 13;
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #c8c8c8;
background: #fff;
-webkit-box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
}
#grpheader .rc-h-gnavi .rc-h-inner > li.icon-nav {
display: none;
}
#grpheader .rc-h-fixed-bar .rc-h-gnavi .rc-h-inner > li.icon-nav {
display: block;
}
#grpheader .rc-h-fixed-bar .rc-h-gnavi .rc-h-inner > li.icon-nav a {
padding: 22px 10px;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.icon-nav > a .rc-h-site-img {
margin-top: -8px;
display: inline-block;
}
#grpheader .rc-h-fixed-bar .rc-h-inner .rc-h-action-nav {
float: right;
margin: 12px 0 11px;
}
#grpheader .rc-h-fixed-bar .rc-h-inner .rc-h-gnavi {
float: left;
width: 100%;
border: 0;
background: #fff;
}
#grpheader .rc-h-fixed-bar .rc-h-inner .rc-h-action-nav .rc-h-action-btn {
font-size: 100%;
padding: 3px 3px 2px;
}
.rc-h-clearfix:before,
#grpheader .rc-h-utility-bar:before,
#grpheader .rc-h-service-bar:before,
#grpheader .rc-h-fixed-bar > .rc-h-inner:before,
.rc-h-clearfix:after,
#grpheader .rc-h-utility-bar:after,
#grpheader .rc-h-service-bar:after,
#grpheader .rc-h-fixed-bar > .rc-h-inner:after {
content: " ";
display: table;
}
.rc-h-clearfix:after,
#grpheader .rc-h-utility-bar:after,
#grpheader .rc-h-service-bar:after,
#grpheader .rc-h-fixed-bar > .rc-h-inner:after {
clear: both;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.dropLink > a > .rex-icon {
font-size: 16px;
vertical-align: middle;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.dropLink:not(:first-child) > a > .rex-icon {
margin-left: 6.8px;
font-weight: 600;
letter-spacing: 0;
-webkit-transition: -webkit-transform .2s ease;
transition: -webkit-transform .2s ease;
transition: transform .2s ease;
transition: transform .2s ease, -webkit-transform .2s ease;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.dropLink:hover > a {
background: #fff;
text-decoration: none;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.dropLink:not(:first-child):hover > a > .rex-icon {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/* for JS */
#logIO.ioDisabled {
display: none !important;
}
/* pageTop
---------------------------- */
.pageTop {
font-size: 13px;
width: 950px;
margin: 0 auto 18px;
text-align: right;
}
.pageTop a {
background: url(/common/img/ico_arrow_t01.png) left center no-repeat;
padding-left: 16px;
*zoom: 1;
}
.pageTop a:hover {
text-decoration: none;
}
/* request_Area
---------------------------- */
.request_Area {
font-size: 13px;
margin: 30px auto 0;
width: 950px;
text-align: left;
}
.request_Area .request_btn_00 {
position: relative;
left: 102px;
bottom: 82px;
}
.request_Area .request_btn_00:hover {
opacity: 0.8;
}
.request_Area_pamphlet {
/* background-color:red;*/
margin-left: 710px;
position: relative;
top: 68px;
font-size: 90%;
font-weight: bold;
}
.request_Area .sec_section {
margin-bottom: 40px;
}
.request_Area .sec_section .second_selectBG01 {
background: url(/common02/img/selectBg01.gif) no-repeat;
width: 302px;
height: 130px;
margin-right: 22px;
float: left;
position: relative;
}
.request_Area .sec_section .second_selectBG01 h3 {
position: absolute;
top: 15px;
left: 9px;
font-size: 100%;
}
.request_Area .sec_section .second_selectBG01 p {
position: absolute;
width: 160px;
top: 40px;
left: 9px;
font-size: 0.8em;
}
.request_Area .sec_section .second_selectBG02 {
background: url(/common02/img/selectBg02.gif) no-repeat;
width: 302px;
height: 130px;
margin-right: 22px;
float: left;
position: relative;
}
.request_Area .sec_section .second_selectBG02 h3 {
position: absolute;
top: 15px;
left: 9px;
font-size: 100%;
}
.request_Area .sec_section .second_selectBG02 p {
position: absolute;
width: 180px;
top: 40px;
left: 9px;
font-size: 0.8em;
}
.request_Area .sec_section .second_selectBG03 {
background: url(/common02/img/selectBg03.gif) no-repeat;
width: 302px;
height: 130px;
float: left;
position: relative;
}
.request_Area .sec_section .second_selectBG03 h3 {
position: absolute;
top: 15px;
left: 9px;
font-size: 100%;
}
.request_Area .sec_section .second_selectBG03 p {
position: absolute;
width: 180px;
top: 40px;
left: 9px;
font-size: 0.8em;
}
.att {
color: #CC0000 !important;
}
.fGreen {
color: #336600 !important;
}
.fOrenge {
color: #ee6400 !important;
}
.fBlue {
color: #3366cc !important;
}
.fBlue02 {
color: #295688 !important;
}
.fGray {
color: #999 !important;
}
.fRed {
color: #990033 !important;
}
.fRed02 {
color: #bf0000 !important;
}
.fBlack {
color: #000000 !important;
}
.fWhite {
color: #ffffff !important;
}
.f10 {
font-size: 10px !important;
}
.f11 {
font-size: 11px !important;
}
.f12 {
font-size: 12px !important;
}
.f14 {
font-size: 14px !important;
}
.f15 {
font-size: 15px !important;
}
.f16 {
font-size: 16px !important;
}
.f18 {
font-size: 18px !important;
}
.f26 {
font-size: 26px !important;
}
a img {
border: none;
outline: none;
}
a img.act {
filter: alpha(opacity=70);
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
}
a:hover img.alpha {
filter: alpha(opacity=70);
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
}
/* MegaDropdown Module */
#grpheader .gnaviDropBox_pc {
position: absolute;
top: 100%;
left: 0;
z-index: 14;
width: 100vw;
padding: 25px 0 0px;
border: 1px solid transparent;
border-top: 1px solid #eaeaea;
background-color: #fff;
display: none;
opacity: 0;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
-webkit-transition: all .2s ease .2s;
transition: all .2s ease .2s;
min-width: 1280px;
}
#grpheader .header-btn:hover .gnaviDropBox_pc {
display: block;
-webkit-animation-name: gnaviDropBox;
animation-name: gnaviDropBox;
-webkit-animation-delay: .5s;
animation-delay: .5s;
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
cursor: default;
}
@-webkit-keyframes gnaviDropBox {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes gnaviDropBox {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#grpheader .gnaviDropBox_pc {
left: 0;
width: 100%;
}
#grpheader .gnaviDropBox_pc .gnaviDropBox-inner {
width: 1072px;
margin: 0 auto;
font-size: 16px;
}
#grpheader .gnaviDropBox_pc .gnaviDropBox-bottom {
background-color: #f7f7f7;
padding: 24px 0;
margin-top: 24px;
}
#grpheader .gnaviDropBox_pc .gnaviDropBox-bottom .gnaviDropBox-bottom_list {
width: 1072px;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#grpheader .gnaviDropBox_pc .gnaviDropBox-bottom .gnaviDropBox-bottom_list .gnaviDropBox-bottom_listItem {
margin-left: 32px;
}
#grpheader .gnaviDropBox_pc .gnaviDropBox-bottom .gnaviDropBox-bottom_list .gnaviDropBox-bottom_listItem .lnk {
font-size: 14px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
#grpheader .gnaviDropBox_pc .gnaviDropBox-bottom .gnaviDropBox-bottom_list .gnaviDropBox-bottom_listItem .lnk i {
font-size: 16px;
}
#grpheader .gnaviDropBox_pc .gnaviDropBox-bottom .gnaviDropBox-bottom_list .gnaviDropBox-bottom_listItem:first-child {
margin-left: 0;
}
#grpheader .gnaviDropBox_pc a {
text-decoration: none;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
#grpheader .gnaviDropBox_pc a:hover, #grpheader .gnaviDropBox_pc a:focus {
color: #37b4f3;
text-decoration: none;
}
#grpheader .gnaviDropBox_pc a:active {
color: #960000;
text-decoration: none;
}
#grpheader .gnaviDropBox_pc .gnavi-main {
display: block;
}
#grpheader .gnaviDropBox_pc .gnavi-cat:nth-child(1) {
width: 100%;
}
#grpheader .gnaviDropBox_pc .gnavi-cat:nth-child(2) {
width: 1072px;
margin-top: 24px;
}
#grpheader .gnaviDropBox_pc .gnavi-ttl {
margin-bottom: 20px;
font-weight: bold;
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst {
margin-top: 20px;
padding-bottom: 24px;
border-bottom: 1px solid #EBEBEB;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li {
margin-left: 31px;
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li a:hover .faq-icon {
background-image: url(/assets/img/icon/ico_faq_b.png);
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li a:hover .book-icon {
background-image: url(/assets/img/icon/ico_book_b.png);
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li .rex-icon {
margin-right: 8px;
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li .faq-icon {
display: inline-block;
margin-right: 8px;
width: 24px;
height: 24px;
background-image: url(/assets/img/icon/ico_faq03.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
-webkit-transition: all .3s;
transition: all .3s;
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li .book-icon {
position: relative;
display: inline-block;
margin-right: 8px;
width: 24px;
height: 24px;
background-image: url(/assets/img/icon/ico_book.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
-webkit-transition: all .3s;
transition: all .3s;
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li i[data-added="true"]:after {
position: absolute;
content: '';
background-color: #bf0000;
border-radius: 50%;
top: -4px;
right: -4px;
width: 16px;
height: 16px;
}
#grpheader .gnaviDropBox_pc ul.gnavi-lst li:first-child {
margin-left: 0;
}
#grpheader .gnaviDropBox_pc .gnavi-item:not(:first-child) {
margin-top: 12px;
}
#grpheader .gnaviDropBox_pc .gnavi-dlst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat {
width: 20%;
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat:nth-child(1) {
width: 210px;
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat:nth-child(2) {
width: 220px;
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat:nth-child(3) {
width: 220px;
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat:nth-child(4) {
width: 205px;
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk {
display: inline-block;
background-position: 0 50%;
background-repeat: no-repeat;
background-size: 32px auto;
padding-left: 48px;
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk span {
font-size: 12px;
margin-left: 8px;
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_life {
background-image: url(/assets/img/header/pc/icon_life.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_leisure {
background-image: url(/assets/img/header/pc/icon_leisure.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_pet {
background-image: url(/assets/img/header/pc/icon_pet.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_medical {
background-image: url(/assets/img/header/pc/icon_medical.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_cancer {
background-image: url(/assets/img/header/pc/icon_cancer.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_package {
background-image: url(/assets/img/header/pc/icon_package.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_fire {
background-image: url(/assets/img/header/pc/icon_fire.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_earthquake {
background-image: url(/assets/img/header/pc/icon_earthquake.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_furniture {
background-image: url(/assets/img/header/pc/icon_furniture.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_car {
background-image: url(/assets/img/header/pc/icon_car.png);
}
#grpheader .gnaviDropBox_pc .gnavi-dlstCat .gnavi-itemLnk_bicycle {
background-image: url(/assets/img/header/pc/icon_bicycle.png);
}
#grpheader .gnaviDropBox_pc .gnavi-cpn {
position: relative;
font-weight: bold;
color: #9c9c9c;
padding-left: 48px;
color: #0783c2;
font-size: 19px;
}
#grpheader .gnaviDropBox_pc .gnavi-cpn.cpn-icon:before {
position: absolute;
content: '';
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
left: 0;
bottom: 0;
}
#grpheader .gnaviDropBox_pc .gnavi-cpn.cpn-icon.health-icon:before {
background-image: url(/assets/img/icon/ico_health.png);
}
#grpheader .gnaviDropBox_pc .gnavi-cpn.cpn-icon.hospital-icon:before {
background-image: url(/assets/img/icon/ico_hospital.png);
}
#grpheader .gnaviDropBox_pc .gnavi-cpn.cpn-icon.family-icon:before {
background-image: url(/assets/img/icon/ico_family.png);
}
#grpheader .gnaviDropBox_pc .gnavi-cpn.cpn-icon.house-icon:before {
background-image: url(/assets/img/icon/ico_house.png);
}
#grpheader .gnaviDropBox_pc .gnavi-cpn.cpn-icon.car-icon:before {
background-image: url(/assets/img/icon/ico_car.png);
}
#grpheader .gnaviDropBox_pc .gnavi-cpn.cpn-icon.plane-icon:before {
background-image: url(/assets/img/icon/ico_plane.png);
}
#grpheader .gnaviDropBox_pc .gnavi-sub {
margin-top: 35px;
padding-top: 18px;
border-top: 1px solid #d1d1d1;
}
#grpheader .gnaviDropBox_pc .gnavi-subLst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#grpheader .gnaviDropBox_pc .gnavi-subItem {
font-size: 14px;
}
#grpheader .gnaviDropBox_pc .gnavi-subItem a {
font-size: 14px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
#grpheader .gnaviDropBox_pc .gnavi-subItem a .rex-icon {
font-size: 16px;
}
#grpheader .gnaviDropBox_pc .gnavi-subItem a:hover i {
color: #37b4f3;
}
#grpheader .gnaviDropBox_pc .gnavi-subItem .link {
font-size: 14px;
}
#grpheader .gnaviDropBox_pc .gnavi-subItem:not(:first-child) {
margin-left: 32px;
}
.modal.modal_w980 {
background-color: transparent;
}
.modal.modal_w980 .modal-body {
width: 980px;
background-color: #fff;
border-radius: 4px;
}
.modal.modal_w980 .modal-bodyInner-con {
padding: 0 64px;
}
.headerModal {
overflow: hidden;
}
.headerModal .headerModal-ttl {
margin-bottom: 30px;
font-size: 22px;
font-weight: 600;
text-align: center;
}
.headerModal .headerModal-ttl::after {
content: "";
display: block;
width: 60px;
height: 2px;
margin: 2px auto 0;
background-color: #0783c2;
}
.headerModal .headerModal-ttl_sub {
margin: 40px 0 15px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.headerModal .headerModal-lead {
margin-bottom: 35px;
font-size: 16px;
text-align: center;
}
.headerModal .headerModal-lnklst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 35px;
padding-bottom: 1px;
}
.headerModal .headerModal-lnklst .headerModal-item {
width: 148px;
}
.headerModal .headerModal-lnklst .headerModal-item:not(:first-child) {
margin-left: 32px;
}
.headerModal .headerModal-lnklst .headerModal-item .headerModal-itemLnk {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 16px;
padding: 6px;
text-align: center;
text-decoration: none;
color: #333;
border: 1px solid #4d4d4d;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 757px) {
.headerModal .headerModal-lnklst .headerModal-item .headerModal-itemLnk:hover, .headerModal .headerModal-lnklst .headerModal-item .headerModal-itemLnk:focus {
color: #fff;
background-color: #37b4f3;
border: 1px solid #37b4f3;
}
}
.headerModal .headerModal-lnklst .headerModal-item .headerModal-itemLnk:active {
color: #fff;
background-color: #0783c2;
border: 1px solid #0783c2;
}
.headerModal .headerModal-contactBox {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 816px;
margin: 0 auto;
padding: 0 24px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.headerModal .headerModal-contactBox:not(:first-of-type) {
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid #ebebeb;
}
.headerModal .headerModal-contactBox.headerModal-contactBox_emergency {
padding-bottom: 14px;
background-color: #f7f7f7;
border: none;
}
.headerModal .headerModal-contactBox .headerModal-contactTxtCol {
width: 482px;
}
.headerModal .headerModal-contactBox .headerModal-contactTelCol {
width: 270px;
}
.headerModal .headerModal-contactBox .headerModal-contactTtl {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 10px;
font-size: 16px;
font-weight: 600;
color: #0783c2;
}
.headerModal .headerModal-contactBox .headerModal-contactTtl .rex-icon {
margin-right: 10px;
font-size: 20px;
}
.headerModal .headerModal-contactBox .headerModal-contactTxt {
font-size: 14px;
}
.headerModal .headerModal-contactBox .headerModal-contactTime {
margin-top: 3px;
font-size: 12px;
color: #686868;
}
.headerModal .headerModal-contactBox .headerModal-contactBold {
font-weight: bold;
}
.headerModal .headerModal-contactBox .headerModal-contactBtnNum {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
padding: 10px;
font-size: 22px;
font-weight: 600;
text-align: center;
text-decoration: none;
color: #0783c2;
border: 1px solid #0783c2;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.headerModal .headerModal-contactBox .headerModal-contactBtnNum .rex-icon {
margin-right: 12px;
font-size: 24px;
}
@media screen and (min-width: 757px) {
.headerModal .headerModal-contactBox .headerModal-contactBtnNum:hover, .headerModal .headerModal-contactBox .headerModal-contactBtnNum:focus {
color: #fff;
background-color: #37b4f3;
border: 1px solid #37b4f3;
}
}
.headerModal .headerModal-contactBox .headerModal-contactBtnNum:active {
color: #fff;
background-color: #0783c2;
border: 1px solid #0783c2;
}
.headerModal .headerModal-contactBox .headerModal-contactCopy {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin-top: 8px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
.headerModal .headerModal-contactBox .headerModal-contactCopy .icon-copy {
display: block;
width: 20px;
height: 20px;
margin-right: 3px;
background: url(/assets/img/header/icon_modal_copy.png) 50% 50% no-repeat;
background-size: cover;
}
@media screen and (min-width: 757px) {
.headerModal .headerModal-contactBox .headerModal-contactCopy:hover, .headerModal .headerModal-contactBox .headerModal-contactCopy:focus {
text-decoration: underline;
}
}
#grpheader .gnaviSearchWindow {
position: absolute;
top: 88px;
left: 0;
z-index: 13;
width: 100%;
background-color: rgba(196, 196, 196, 0.9);
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-body {
position: relative;
max-width: 1070px;
margin: 0 auto;
padding: 37px 0;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-close {
position: absolute;
right: 0;
top: 15px;
color: #333;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-close .rex-icon.x {
font-size: 24px;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap {
padding: 4px 0;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-form {
position: relative;
width: 713px;
margin: 0 auto;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput {
padding: 11px 109px 11px 25px;
width: 100%;
height: 40px;
font-size: 16px;
line-height: normal;
font-weight: 400;
color: #333;
background-color: #fff;
border: none;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1), border 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1), border 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput:focus {
outline: none;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput::-ms-clear {
visibility: hidden;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput::-webkit-input-placeholder {
color: #9c9c9c;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput::-moz-placeholder {
color: #9c9c9c;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput::-ms-input-placeholder {
color: #9c9c9c;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput::placeholder {
color: #9c9c9c;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput:-ms-input-placeholder {
color: #9c9c9c;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formInput::-ms-input-placeholder {
color: #9c9c9c;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formReset,
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formSubmit {
display: inline-block;
position: absolute;
text-align: center;
vertical-align: bottom;
white-space: nowrap;
-ms-touch-action: manipulation;
touch-action: manipulation;
background: none;
border: 1px solid transparent;
outline: none;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formSubmit {
position: absolute;
top: 0;
right: 0;
width: 65px;
height: 40px;
color: #9c9c9c;
border: none;
border-radius: 0 20px 20px 0;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formSubmit .rex-icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formReset {
display: none;
position: absolute;
top: 0;
right: 65px;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
color: #9c9c9c;
background-color: transparent;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formReset[aria-selected=true] {
display: block;
}
#grpheader .gnaviSearchWindow .gnaviSearchWindow-wrap .gnaviSearchWindow-formReset .rex-icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
#grpheader .gnaviSearchWindow[aria-hidden=true] {
display: none;
}
#grpheader .gnaviSearchWindow[aria-hidden=false] {
display: block;
-webkit-animation-name: gnaviSearchWindow;
animation-name: gnaviSearchWindow;
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes gnaviSearchWindow {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes gnaviSearchWindow {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#grpheader.rc-h-simple .rc-h-inner {
width: 1072px;
margin: 0 auto;
}
#grpheader.rc-h-simple .rc-h-site-id {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
height: 72px;
}
@media screen and (max-width: 756px) {
.modal.modal_w980 {
padding: 0 10px;
}
.modal.modal_w980 .modal-body {
width: auto;
}
.modal.modal_w980 .modal-bodyInner-con {
padding: 0;
}
.headerModal {
padding: 10px;
}
.headerModal .headerModal-ttl {
margin-bottom: 25px;
font-size: 18px;
}
.headerModal .headerModal-ttl_sub {
font-size: 16px;
text-align: left;
}
.headerModal .headerModal-lead {
margin-bottom: 25px;
font-size: 14px;
text-align: left;
}
.headerModal .headerModal-lnklst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 25px;
}
.headerModal .headerModal-lnklst .headerModal-item {
width: 47%;
}
.headerModal .headerModal-lnklst .headerModal-item:not(:first-child) {
margin-left: 0;
}
.headerModal .headerModal-lnklst .headerModal-item:not(:nth-child(-n+2)) {
margin-top: 15px;
}
.headerModal .headerModal-lnklst .headerModal-item .headerModal-itemLnk {
padding: 7px;
font-size: 14px;
}
.headerModal .headerModal-contactBox {
display: block;
width: auto;
padding: 0;
}
.headerModal .headerModal-contactBox:not(:first-of-type) {
margin-top: 15px;
padding-top: 15px;
}
.headerModal .headerModal-contactBox.headerModal-contactBox_emergency {
padding: 15px 10px 20px;
}
.headerModal .headerModal-contactBox .headerModal-contactTxtCol {
width: auto;
}
.headerModal .headerModal-contactBox .headerModal-contactTelCol {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
width: auto;
margin-top: 10px;
}
.headerModal .headerModal-contactBox .headerModal-contactTtl {
margin-bottom: 5px;
font-size: 14px;
}
.headerModal .headerModal-contactBox .headerModal-contactTtl .rex-icon {
margin-right: 5px;
}
.headerModal .headerModal-contactBox .headerModal-contactBtn {
-webkit-box-flex: 1;
-webkit-flex: 1 0 0%;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.headerModal .headerModal-contactBox .headerModal-contactBtnNum {
height: 100%;
padding: 8px 0;
font-size: 18px;
}
.headerModal .headerModal-contactBox .headerModal-contactBtnNum .rex-icon {
margin-right: 8px;
font-size: 16px;
}
.headerModal .headerModal-contactBox .headerModal-contactCopy {
display: block;
position: relative;
width: 56px;
height: 100%;
margin-top: 0;
margin-right: 10px;
padding-top: 3px;
font-size: 10px;
text-align: center;
border: solid 1px #d1d1d1;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.headerModal .headerModal-contactBox .headerModal-contactCopy:before {
content: "";
position: absolute;
top: 50%;
right: -11px;
margin-top: -6px;
text-align: center;
border: 6px solid transparent;
border-left: 6px solid #fff;
z-index: 2;
}
.headerModal .headerModal-contactBox .headerModal-contactCopy:after {
content: "";
position: absolute;
top: 50%;
right: -12px;
margin-top: -6px;
border: 6px solid transparent;
border-left: 6px solid #d1d1d1;
z-index: 1;
}
.headerModal .headerModal-contactBox .headerModal-contactCopy .icon-copy {
width: 25px;
height: 25px;
margin: 0 auto;
}
.headerModal .headerModal-contactBox_emergency .headerModal-contactCopy:before {
border-left-color: #f7f7f7;
}
.headerModal .headerModal-contactBox_emergency .headerModal-contactCopy:after {
border-left-color: #d1d1d1;
}
}
#grpheader .rc-h-service-bar {
border-bottom: 1px solid #eaeaea;
margin-bottom: -1px;
}
.dropCol {
text-align: center;
}
.dropCol-ttl {
font-size: 15px;
margin-bottom: 15px;
font-weight: bold;
}
.megaColumn .columnRow {
overflow: hidden;
}
.gnaviDropBoxLstDesc {
margin-top: 25px;
}
@media screen and (min-width: 757px) {
#grpheader .clone {
display: none;
}
}
@media screen and (max-width: 756px) {
#grpheader .rc-h-service-bar-inner {
position: absolute;
z-index: 14;
width: 100%;
height: 56px;
background-color: #fff;
border-bottom: 1px solid #ebebeb;
}
#grpheader .rc-h-service-bar .rc-h-inner {
width: auto;
height: 56px;
padding: 0 10px;
}
#grpheader .header-btn:hover .gnaviDropBox_pc {
display: none;
}
#grpheader .rc-h-gnavi {
overflow-x: scroll;
}
.page_media #grpheader .rc-h-gnavi {
border: none !important;
}
#grpheader .rc-h-gnavi .rc-h-inner {
width: 600px;
padding: 0;
}
#grpheader .rc-h-service-bar .rc-h-txt-wrap {
margin-top: 57px;
padding: 0;
}
#grpheader .rc-h-txt-wrap .rc-h-txt {
display: block;
padding: 8px 5px;
font-size: 10px;
letter-spacing: -0.4px;
}
.rc-h-clearfix {
position: fixed;
position: static;
top: 0;
left: 0;
right: 0;
z-index: 120;
background: #fff;
border-bottom: 1px solid #eaeaea;
}
header {
height: 90px;
}
.page_media header {
height: 101px;
}
.rc-h-txt-wrap {
position: absolute;
top: 70px;
left: 0;
right: 0;
z-index: 110;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
background: #fff;
}
#grpheader nav {
position: absolute;
top: 100px;
left: 0;
right: 0;
z-index: 110;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
background: #fff;
}
body {
position: relative;
}
body.head_sp_fixed .page-barba {
position: fixed;
top: 0;
}
body header #grpheader nav.clone {
position: fixed;
top: -100px;
}
body.head_sp_fixed header #grpheader nav.clone {
top: -1px;
}
.rc-h-utility-bar {
height: 0;
display: none;
}
.rc-h-txt-wrap {
position: static;
}
#grpheader .rc-h-txt-wrap {
border-top: 0;
}
#grpheader .rc-h-service-bar .rc-h-inner {
border-bottom: none;
}
#grpheader .rc-h-gnavi .rc-h-inner > li.dropLink {
display: none;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a {
padding: 15px;
font-size: 15px;
height: auto;
}
#grpheader,
#grpheader.rc-h-liquid .rc-h-noscript-bar,
#grpheader.rc-h-liquid .rc-h-service-bar,
#grpheader.rc-h-liquid .rc-h-utility-bar {
width: auto;
min-width: auto;
}
#grpheader .rc-h-site-id-logo {
height: auto;
}
#grpheader .rc-h-site-id img {
height: 40px;
width: auto;
}
#grpheader .rc-h-site-menu ul li {
margin: 0;
padding: 0 5px;
}
#grpheader .rc-h-site-menu ul li a {
display: block;
padding: 0;
text-align: center;
}
#grpheader .rc-h-site-menu ul li a .rex-icon {
display: inline-block;
margin-right: 0;
font-size: 24px;
}
#grpheader .rc-h-site-menu ul li a .rex-icon::before {
vertical-align: inherit;
}
#grpheader .rc-h-site-menu ul li .rc-h-site-txt {
display: block;
font-size: 10px;
}
#grpheader .gnaviSearchWindow {
display: none;
}
body.page_index #grpheader .rc-h-gnavi .rc-h-inner,
body.page_life #grpheader .rc-h-gnavi .rc-h-inner,
body.page_general #grpheader .rc-h-gnavi .rc-h-inner,
body.page_pet #grpheader .rc-h-gnavi .rc-h-inner,
body.page_media #grpheader .rc-h-gnavi .rc-h-inner {
width: 100%;
}
body.page_index #grpheader .rc-h-gnavi .rc-h-inner > li,
body.page_life #grpheader .rc-h-gnavi .rc-h-inner > li,
body.page_general #grpheader .rc-h-gnavi .rc-h-inner > li,
body.page_pet #grpheader .rc-h-gnavi .rc-h-inner > li,
body.page_media #grpheader .rc-h-gnavi .rc-h-inner > li {
width: 33.33%;
display: none;
}
body.page_index #grpheader .rc-h-gnavi .rc-h-inner > li > a,
body.page_life #grpheader .rc-h-gnavi .rc-h-inner > li > a,
body.page_general #grpheader .rc-h-gnavi .rc-h-inner > li > a,
body.page_pet #grpheader .rc-h-gnavi .rc-h-inner > li > a,
body.page_media #grpheader .rc-h-gnavi .rc-h-inner > li > a {
padding: 15px 5px;
}
body.page_index #grpheader .rc-h-gnavi .rc-h-inner > li.nav_pet.nav_clone,
body.page_index #grpheader .rc-h-gnavi .rc-h-inner > li.nav_clone + .nav_top,
body.page_index #grpheader .rc-h-gnavi .rc-h-inner > li.nav_life {
display: block;
}
body.page_life #grpheader .rc-h-gnavi .rc-h-inner > li.nav_clone + .nav_top,
body.page_life #grpheader .rc-h-gnavi .rc-h-inner > li.nav_life,
body.page_life #grpheader .rc-h-gnavi .rc-h-inner > li.nav_general {
display: block;
}
body.page_general #grpheader .rc-h-gnavi .rc-h-inner > li.nav_life,
body.page_general #grpheader .rc-h-gnavi .rc-h-inner > li.nav_general,
body.page_general #grpheader .rc-h-gnavi .rc-h-inner > li.nav_general + .nav_pet {
display: block;
}
body.page_pet #grpheader .rc-h-gnavi .rc-h-inner > li.nav_general,
body.page_pet #grpheader .rc-h-gnavi .rc-h-inner > li.nav_general + .nav_pet,
body.page_pet #grpheader .rc-h-gnavi .rc-h-inner > li.nav_clone.nav_top {
display: block;
}
body.page_index #grpheader .rc-h-gnavi .rc-h-inner > li.nav_media {
display: none !important;
}
body.page_index #grpheader .rc-h-gnavi .rc-h-inner > li.nav_top > a,
body.page_life #grpheader .rc-h-gnavi .rc-h-inner > li.nav_life > a,
body.page_general #grpheader .rc-h-gnavi .rc-h-inner > li.nav_general > a,
body.page_pet #grpheader .rc-h-gnavi .rc-h-inner > li.nav_pet > a,
body.page_media #grpheader .rc-h-gnavi .rc-h-inner > li.nav_media > a {
color: #bf0000;
-webkit-transition: initial;
transition: initial;
}
body.page_index #grpheader .rc-h-gnavi .rc-h-inner > li.nav_top > a::after,
body.page_life #grpheader .rc-h-gnavi .rc-h-inner > li.nav_life > a::after,
body.page_general #grpheader .rc-h-gnavi .rc-h-inner > li.nav_general > a::after,
body.page_pet #grpheader .rc-h-gnavi .rc-h-inner > li.nav_pet > a::after,
body.page_media #grpheader .rc-h-gnavi .rc-h-inner > li.nav_media > a::after {
width: 100%;
background-color: #bf0000;
-webkit-transition: initial;
transition: initial;
}
.headerMenuFooter {
padding: 20px 30px;
background-color: #f7f7f7;
}
.headerMenuFooter a {
display: block;
border: 1px solid #686868;
padding: 10px;
border-radius: 4px;
color: #686868;
text-align: center;
}
.headerMenuFooter a span {
font-size: 16px;
padding-left: 24px;
position: relative;
}
.headerMenuFooter a span i {
font-size: 16px;
margin-right: 8px;
position: absolute;
left: 0;
top: calc(50% - 8px);
}
.gnaviSearchWindow {
padding: 12px 15px;
}
.gnaviSearchWindow .gnaviSearchWindow-form {
position: relative;
}
.gnaviSearchWindow .gnaviSearchWindow-formInput {
padding: 11px 84px 11px 18px;
width: 100%;
height: 40px;
font-size: 16px;
line-height: normal;
font-weight: 400;
color: #333;
background-color: #f7f7f7;
border: none;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1), border 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1), border 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.gnaviSearchWindow .gnaviSearchWindow-formInput:focus {
outline: none;
}
.gnaviSearchWindow .gnaviSearchWindow-formInput::-ms-clear {
visibility: hidden;
}
.gnaviSearchWindow .gnaviSearchWindow-formInput::-webkit-input-placeholder {
color: #9c9c9c;
}
.gnaviSearchWindow .gnaviSearchWindow-formInput::-moz-placeholder {
color: #9c9c9c;
}
.gnaviSearchWindow .gnaviSearchWindow-formInput::-ms-input-placeholder {
color: #9c9c9c;
}
.gnaviSearchWindow .gnaviSearchWindow-formInput::placeholder {
color: #9c9c9c;
}
.gnaviSearchWindow .gnaviSearchWindow-formInput:-ms-input-placeholder {
color: #9c9c9c;
}
.gnaviSearchWindow .gnaviSearchWindow-formInput::-ms-input-placeholder {
color: #9c9c9c;
}
.gnaviSearchWindow .gnaviSearchWindow-formReset,
.gnaviSearchWindow .gnaviSearchWindow-formSubmit {
display: inline-block;
position: absolute;
text-align: center;
vertical-align: bottom;
white-space: nowrap;
-ms-touch-action: manipulation;
touch-action: manipulation;
background: none;
border: 1px solid transparent;
outline: none;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.gnaviSearchWindow .gnaviSearchWindow-formSubmit {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
color: #9c9c9c;
border: none;
border-radius: 0 20px 20px 0;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.gnaviSearchWindow .gnaviSearchWindow-formSubmit .rex-icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
.gnaviSearchWindow .gnaviSearchWindow-formReset {
display: none;
position: absolute;
top: 0;
right: 40px;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
color: #9c9c9c;
background-color: transparent;
}
.gnaviSearchWindow .gnaviSearchWindow-formReset[aria-selected=true] {
display: block;
}
.gnaviSearchWindow .gnaviSearchWindow-formReset .rex-icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
.gnaviMenu a {
color: #333;
}
.gnaviMenu a:hover, .gnaviMenu a:active {
text-decoration: none;
}
.gnaviMenu .gnaviMenu-lst,
.gnaviMenu .gnaviMenu-lstSupport {
padding: 0;
width: 100%;
margin: 0 auto;
border-top: none;
}
.gnaviMenu .gnaviMenu-lst:first-child,
.gnaviMenu .gnaviMenu-lstSupport:first-child {
padding-top: 0;
}
.gnaviMenu .gnaviMenu-lst:nth-child(3),
.gnaviMenu .gnaviMenu-lstSupport:nth-child(3) {
border-top: none;
padding-bottom: 16px;
border-bottom: 1px solid #d1d1d1;
}
.gnaviMenu .gnaviMenu-lst:not(:first-child),
.gnaviMenu .gnaviMenu-lstSupport:not(:first-child) {
border-top: 1px solid #ebebeb;
}
.gnaviMenu .gnaviMenu-consult {
background-color: #ebebeb;
padding: 24px 16px;
}
.gnaviMenu .gnaviMenu-consult .gnaviMenu-consultLink {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.gnaviMenu .gnaviMenu-consult a {
display: block;
background-color: #fff;
text-align: center;
color: #0783c2;
padding: 16px 0;
width: calc(50% - 8px);
border-radius: 4px;
font-size: 17px;
}
.gnaviMenu .gnaviMenu-consult a span {
position: relative;
padding-left: 32px;
font-weight: bold;
}
.gnaviMenu .gnaviMenu-consult a span i {
content: '';
position: absolute;
font-size: 24px;
top: calc(50% - 12px);
left: 0;
width: 24px;
height: 24px;
}
.gnaviMenu .gnaviMenu-consult a span i.consult-icon {
background-image: url(/assets/img/top/ico_pear_consult.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.gnaviMenu .gnaviMenu-bottomLink {
padding: 32px 16px;
}
.gnaviMenu .gnaviMenu-bottomLink li {
font-size: 14px;
}
.gnaviMenu .gnaviMenu-bottomLink li:nth-child(n+2) {
margin-top: 24px;
}
.gnaviMenu .gnaviMenu-bottomLink li a i {
margin-left: 8px;
font-size: 12px;
}
.gnaviMenu .gnaviMenu-item {
font-size: 16px;
border-bottom: 1px solid #ebebeb;
margin: 0 16px;
}
.gnaviMenu .gnaviMenu-item > a {
padding: 16px 16px 16px 0;
display: block;
position: relative;
}
.gnaviMenu .gnaviMenu-item > a i {
position: absolute;
top: calc(50% - 8px);
right: 0;
font-size: 16px;
}
.gnaviMenu .gnaviMenu-item:not(:first-child) {
margin-top: 4px;
}
.gnaviMenu .gnaviMenu-item:last-child {
border-bottom: none;
}
.gnaviMenu .gnaviMenu-item .gnaviMenu-item:not(:first-child) {
margin-top: 0;
}
.gnaviMenu .gnaviMenu-itemAccordion {
padding: 16px 0;
font-weight: bold;
}
.gnaviMenu .gnaviMenu-itemAccordion .gnaviMesnu-itemToggle {
font-weight: bold;
}
.gnaviMenu .gnaviMenu-itemLnk {
display: block;
padding: 6px 17px;
}
.gnaviMenu .gnaviMenu-lstSupport .gnaviMenu-item {
font-size: 14px;
}
.gnaviMenu .gnaviMenu-itemToggle {
position: relative;
padding: 0 48px 0 16px;
}
.gnaviMenu .gnaviMenu-lst_secondary {
margin-top: 6px;
}
.gnaviMenu .lstAcc-descTermSwitch {
position: absolute;
right: 17px;
top: 50%;
margin-top: -10px;
}
.gnaviMenu .lstAcc-descTermSwitchIcon .rex-icon {
font-size: 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.gnaviMenu .gnaviMenu-itemToggle[aria-selected=true] {
padding-left: 15px;
color: #0783c2;
border-left: 2px solid #0783c2;
}
.gnaviMenu .gnaviMenu-itemToggle[aria-selected=true] .lstAcc-descTermSwitchIcon .rex-icon {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-itemToggle[aria-selected=true] {
padding-left: 17px;
background-color: #f7f7f7;
border-left: none;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item {
padding: 16px 0 24px;
border-bottom: 1px solid #ebebeb;
width: calc(100% - 32px);
margin: 0 auto;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item:nth-child(n+2) {
margin-top: 24px;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item:last-child {
border-bottom: none;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl {
position: relative;
color: #0783c2;
font-size: 18px;
font-weight: bold;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl span {
padding-left: 48px;
display: block;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl:before {
position: absolute;
content: '';
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 36px;
height: 36px;
top: calc(50% - 18px);
left: 0;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl.health-icon:before {
background-image: url(/assets/img/icon/ico_health.png);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl.hospital-icon:before {
background-image: url(/assets/img/icon/ico_hospital.png);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl.family-icon:before {
background-image: url(/assets/img/icon/ico_family.png);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl.house-icon:before {
background-image: url(/assets/img/icon/ico_house.png);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl.car-icon:before {
background-image: url(/assets/img/icon/ico_car.png);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemTtl.plane-icon:before {
background-image: url(/assets/img/icon/ico_plane.png);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemList {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 16px;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemList li.gnaviMenu-itemListItem {
width: calc(50% - 4px);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemList li.gnaviMenu-itemListItem:nth-child(n+3) {
margin-top: 16px;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemList li.gnaviMenu-itemListItem a {
display: block;
position: relative;
font-size: 15px;
padding-right: 8px;
font-weight: 400;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemList li.gnaviMenu-itemListItem a span {
font-size: 12px;
margin-left: 8px;
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemList li.gnaviMenu-itemListItem a i.rex-icon {
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 12px;
top: calc(50% - 6px);
}
.gnaviMenu .gnaviMenu-lst_secondary .gnaviMenu-item .gnaviMenu-itemList li.gnaviMenu-itemListItem a i.rex-icon:before {
position: absolute;
top: 0;
left: 0;
font-size: 12px;
}
.gnaviMenu .gnaviMenu-lst_tertiary {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-item {
width: 33.33%;
text-align: center;
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk {
padding: 12px 5px 10px;
font-size: 14px;
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk::before {
content: "";
display: block;
width: 40px;
height: 40px;
margin: 0 auto 5px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_life::before {
background-image: url(/assets/img/header/sp/icon_life.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_leisure::before {
background-image: url(/assets/img/header/sp/icon_leisure.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_pet::before {
background-image: url(/assets/img/header/sp/icon_pet.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_medical::before {
background-image: url(/assets/img/header/sp/icon_medical.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_cancer::before {
background-image: url(/assets/img/header/sp/icon_cancer.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_package::before {
background-image: url(/assets/img/header/sp/icon_package.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_fire::before {
background-image: url(/assets/img/header/sp/icon_fire.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_earthquake::before {
background-image: url(/assets/img/header/sp/icon_earthquake.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_furniture::before {
background-image: url(/assets/img/header/sp/icon_furniture.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_car::before {
background-image: url(/assets/img/header/sp/icon_car.png);
}
.gnaviMenu .gnaviMenu-lst_tertiary .gnaviMenu-itemLnk_bicycle::before {
background-image: url(/assets/img/header/sp/icon_bicycle.png);
}
.rc-h-site-id-logo {
height: auto;
}
html[aria-hidden="true"] {
overflow: hidden;
height: 100%;
}
body[aria-hidden="true"] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
[aria-expanded=false].spOnly.gnaviDropBox {
-webkit-animation-name: headerMenuClose;
animation-name: headerMenuClose;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
[aria-expanded=true].spOnly.gnaviDropBox {
-webkit-animation-name: headerMenuOpen;
animation-name: headerMenuOpen;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes headerMenuOpen {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headerMenuOpen {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes headerMenuClose {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes headerMenuClose {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.spOnly.gnaviDropBox {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: calc(100% - 57px);
margin-top: 57px;
background-color: #fff;
overflow-y: scroll;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
#grpheader .header-btn {
display: block;
width: auto;
height: auto;
margin-left: 0;
margin-right: 20px;
padding: 0;
text-align: center;
}
.header-btn_icon .rex-icon.x {
display: block;
}
.header-btn_icon .rex-icon[aria-selected=true] {
display: block;
}
.header-btn_icon .rex-icon[aria-selected=false] {
display: none;
}
.header-btn_icon .header-btn_txt {
display: block;
font-size: 10px;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a::after {
bottom: 0;
}
#grpheader.rc-h-simple .rc-h-service-bar-inner {
height: 62px;
}
#grpheader.rc-h-simple .rc-h-inner {
height: 62px;
}
#grpheader.rc-h-simple .rc-h-site-id {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 62px;
}
#grpheader.rc-h-simple .rc-h-txt-wrap {
margin-top: 63px;
}
}
@media screen and (max-width: 320px) {
header {
height: 88px;
}
#grpheader .rc-h-txt-wrap .rc-h-txt {
padding: 7px 3px;
letter-spacing: -1.4px;
}
#grpheader .rc-h-gnavi .rc-h-inner > li > a {
font-size: 12px;
}
}
.gnav-infoList {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 16px;
margin: 8px 0 16px;
}
.gnav-infoList li {
width: 33%;
text-align: center;
font-size: 13px;
}
.gnav-infoList li:nth-child(n+4) {
margin-top: 24px;
}
.gnav-infoList li span {
display: inline-block;
position: relative;
padding-top: 40px;
}
.gnav-infoList li span i {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
font-size: 32px;
text-align: center;
width: 32px;
}
.gnav-infoList li span i.book-icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url(/assets/img/icon/ico_book.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.gnav-infoList li span i.faq-icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url(/assets/img/icon/ico_faq03.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.gnav-infoList li span i[data-added="true"]:after {
position: absolute;
content: '';
background-color: #bf0000;
border-radius: 50%;
top: -4px;
right: -4px;
width: 16px;
height: 16px;
}
@media screen and (max-width: 756px) {
.gnavPullDown {
position: absolute;
top: 0;
left: 0;
width: 100vw;
background: #fff;
z-index: 20000;
}
.gnavPullDown.gnavPullDown-s ul {
width: 300px;
margin: 0 auto;
}
.gnavPullDown .gnavPullDown-head {
border-bottom: 1px solid #ebebeb;
height: 57px;
}
.gnavPullDown .gnavPullDown-head p {
line-height: 57px;
text-align: center;
font-size: 16px;
}
.gnavPullDown .gnavPullDown-head i {
position: absolute;
right: 16px;
top: 16px;
}
.gnavPullDown[aria-expanded="false"] {
display: none !important;
}
.gnavPullDown[aria-expanded="true"] {
display: block !important;
}
.gnavPullDown ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 32px 0;
width: calc(100% - 30px);
max-width: 320px;
margin: 0 auto;
}
.gnavPullDown ul li {
position: relative;
padding-top: 40px;
}
.gnavPullDown ul li i {
position: absolute;
top: 0;
left: 0px;
right: 0px;
margin: 0 auto;
text-align: center;
font-size: 32px;
}
.gnavPullDown ul li i.book-icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url(/assets/img/icon/ico_book.png);
background-repeat: no-repeat;
background-size: cover;
}
.gnavPullDown ul li i.faq-icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url(/assets/img/icon/ico_faq03.png);
background-repeat: no-repeat;
background-size: cover;
}
.gnavPullDown ul li i[data-added="true"]:after {
position: absolute;
content: '';
background-color: #bf0000;
border-radius: 50%;
top: -4px;
right: -4px;
width: 16px;
height: 16px;
}
.gnavPullDown ul li a {
color: #000;
font-size: 13px;
}
.gnavPullDown-bg {
position: fixed;
background-color: black;
opacity: 0.3;
z-index: 19999;
display: none;
width: 100vw;
height: 100vh;
}
.gnavPullDown-bg[aria-expanded="true"] {
display: block;
}
}
/*
#overview
Group Footer
*/
/*
#styleguide
Group Footer
*/
.pageTopWrap .pageTopWrap-inner {
max-width: 1070px;
margin: 0 auto;
position: relative;
}
.pageTopWrap a {
position: absolute;
top: -60px;
right: 0;
display: inline-block;
width: 40px;
height: 40px;
padding: 7px;
color: #d1d1d1;
background-color: transparent;
border: 1px solid #d1d1d1;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: transform 0.2s cubic-bezier(0.25, 0, 0.45, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
z-index: 3;
}
.pageTopWrap a:hover, .pageTopWrap a:focus {
color: #0783c2;
background-color: transparent;
border: 1px solid #0783c2;
}
/*
#styleguide
Group Footer - Site Map
*/
/* footer
---------------------------- */
#footerSiteMap01 {
padding: 20px 0;
text-align: left;
background-color: #ebebeb;
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
}
#footerSiteMap01 a {
color: #333;
text-decoration: none;
}
#footerSiteMap01 a:hover {
text-decoration: underline;
}
#footerSiteMap01 .footerSiteMapIn {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 1072px;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 757px) {
#footerSiteMap01 .footerSiteMapIn {
min-height: 170px;
}
}
#footerSiteMap01 .footerSiteMapIn-col {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 757px) {
#footerSiteMap01 .footerSiteMapIn-col:not(:first-child) {
margin-left: 32px;
}
}
@media screen and (min-width: 757px) {
#footerSiteMap01 .footerSiteMapIn-col:last-child {
margin-left: 0;
display: inline-block;
width: 290px;
}
#footerSiteMap01 .footerSiteMapIn-col:last-child .footerSiteMapInLst {
width: 100%;
}
}
#footerSiteMap01 .footerSiteMapIn-inr {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media screen and (min-width: 757px) {
#footerSiteMap01 .footerSiteMapIn-inr {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
}
}
#footerSiteMap01 .footerSiteMapInLst {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#footerSiteMap01 .footerSiteMapIn-cpn {
margin-bottom: 10px;
}
#footerSiteMap01 .footerSiteMapIn-cpn .rex-icon {
display: none;
}
#footerSiteMap01 .footerSiteMapIn-cpnLnk {
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
#footerSiteMap01 .footerSiteMapIn-cpnLnk:hover {
text-decoration: none;
}
#footerSiteMap01 .footerSiteMapIn-cpnLnk span.pcOnly {
display: inline !important;
}
#footerSiteMap01 .footerSiteMapInLst-itemLnk {
font-size: 12px;
color: #686868;
}
#footerSiteMap01 .footerSiteMapInLst-itemLnk span {
font-size: 10px;
margin-left: 8px;
}
#footerSiteMap01 .footerSiteMapInLst-item {
min-width: 60px;
margin-right: 40px;
}
#footerSiteMap01 .footerSiteMapBottom {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
width: 1072px;
margin: 30px auto 0;
}
#footerSiteMap01 .copyright {
text-align: center;
}
#footerSiteMap01 .copyright-txt {
font-size: 10px;
color: #9c9c9c;
}
#footerSiteMap01 .footerSiteMapInUtilityLst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#footerSiteMap01 .footerSiteMapInUtilityLst-item {
margin: 0 12px;
}
#footerSiteMap01 .footerSiteMapInUtilityLst-itemLnk {
font-size: 12px;
color: #686868;
}
@media screen and (max-width: 756px) {
#footerSiteMap01 {
padding: 0 15px 20px;
}
#footerSiteMap01 a:hover {
text-decoration: none;
}
#footerSiteMap01 .footerSiteMapIn {
display: block;
width: auto;
}
#footerSiteMap01 .footerSiteMapIn-col {
border-bottom: 1px solid #d1d1d1;
}
#footerSiteMap01 .footerSiteMapIn-col:nth-child(1), #footerSiteMap01 .footerSiteMapIn-col:nth-child(2), #footerSiteMap01 .footerSiteMapIn-col:nth-child(3) {
width: auto;
}
#footerSiteMap01 .footerSiteMapIn-inr {
display: block;
padding-bottom: 15px;
}
#footerSiteMap01 .footerSiteMapInLst:nth-child(1), #footerSiteMap01 .footerSiteMapInLst:nth-child(2), #footerSiteMap01 .footerSiteMapInLst:nth-child(3), #footerSiteMap01 .footerSiteMapInLst:nth-child(4) {
width: auto;
}
#footerSiteMap01 .footerSiteMapIn-cpn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
padding: 18px 0;
}
#footerSiteMap01 .footerSiteMapIn-cpn .rex-icon {
display: block;
margin-left: auto;
font-size: 20px;
color: #333;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#footerSiteMap01 .footerSiteMapIn-cpn[aria-selected=true] .footerSiteMapIn-cpnLnk {
color: #333;
}
#footerSiteMap01 .footerSiteMapIn-cpn[aria-selected=true] .rex-icon {
color: #333;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
#footerSiteMap01 .footerSiteMapIn-cpnLnk {
margin-right: 10px;
font-size: 16px;
font-weight: 400;
color: #686868;
pointer-events: none;
}
#footerSiteMap01 .footerSiteMapIn-cpnLnk span.pcOnly {
display: none !important;
}
#footerSiteMap01 .footerSiteMapInLst-item {
margin-bottom: 5px;
}
#footerSiteMap01 .footerSiteMapInLst-itemLnk {
font-size: 12px;
}
#footerSiteMap01 .footerSiteMapBottom {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: auto;
margin: 10px auto 0;
}
#footerSiteMap01 .copyright {
text-align: left;
}
#footerSiteMap01 .copyright-txt {
font-size: 10px;
}
#footerSiteMap01 .footerSiteMapUtility {
margin-top: 15px;
}
#footerSiteMap01 .footerSiteMapInUtilityLst {
-webkit-box-pack: start;
-webkit-justify-content: start;
-ms-flex-pack: start;
justify-content: start;
}
#footerSiteMap01 .footerSiteMapInUtilityLst-item {
margin: 0 15px 0 0;
}
}
/*
#styleguide
Group Footer - Rakuten Link Area
*/
#footerGrpRakutenLinkArea {
line-height: 1.7;
}
#footerGrpRakutenLinkArea .rc-f-standard {
font-size: 13px;
text-align: left;
color: #333;
}
#footerGrpRakutenLinkArea .rc-f-standard a,
#footerGrpRakutenLinkArea .rc-f-standard img {
text-decoration: none;
border: none;
}
#footerGrpRakutenLinkArea .rc-f-standard a:hover {
text-decoration: underline;
}
#footerGrpRakutenLinkArea .rc-f-standard li {
list-style: none;
}
#footerGrpRakutenLinkArea .rc-f-standard h1, #footerGrpRakutenLinkArea .rc-f-standard h2, #footerGrpRakutenLinkArea .rc-f-standard h3, #footerGrpRakutenLinkArea .rc-f-standard h4,
#footerGrpRakutenLinkArea .rc-f-standard h5, #footerGrpRakutenLinkArea .rc-f-standard h6, #footerGrpRakutenLinkArea .rc-f-standard h7, #footerGrpRakutenLinkArea .rc-f-standard h8,
#footerGrpRakutenLinkArea .rc-f-standard div, #footerGrpRakutenLinkArea .rc-f-standard dl, #footerGrpRakutenLinkArea .rc-f-standard dt, #footerGrpRakutenLinkArea .rc-f-standard dd,
#footerGrpRakutenLinkArea .rc-f-standard div, #footerGrpRakutenLinkArea .rc-f-standard p, #footerGrpRakutenLinkArea .rc-f-standard ul, #footerGrpRakutenLinkArea .rc-f-standard li {
margin: 0;
padding: 0;
}
#footerGrpRakutenLinkArea .rc-f-standard li {
list-style: none;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-section01 {
padding: 10px 0;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-section-bar {
padding: 10px 0;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 1072px;
margin: 0 auto;
position: relative;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-liquid .rc-f-section-bar,
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-fixed .rc-f-section-bar {
padding: 10px;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-liquid .rc-f-section00,
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-fixed .rc-f-section00 {
padding: 10px;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-liquid .rc-f-section01,
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-fixed .rc-f-section01 {
padding: 10px;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-fixed {
width: 950px;
margin: 0 auto;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-liquid .rc-f-inner {
width: 100%;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-block {
margin-bottom: 20px;
}
#footerGrpRakutenLinkArea .rc-f-standard .rcf-list-block {
margin-bottom: 5px;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-center {
text-align: center;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-text-em {
color: #bf0000;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-text-strong {
font-weight: bold;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-list-nav li {
display: inline;
zoom: 1;
padding: 0 .5em 0 .45em;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-btn {
font-weight: bold;
display: block;
color: #333;
border: 1px solid #c7c7c7;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-btn span {
display: block;
padding: 5px 10px 5px 5px;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-btn span:before {
display: inline-block;
padding-left: 5px;
content: '';
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid #868686;
*display: inline;
*zoom: 1;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-btn:hover {
text-decoration: none;
color: #939393;
border: 1px solid #d5d5d5;
background: #fcfcfc;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-btn:hover span:before {
border-left: 5px solid #9a9a9a;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline dt,
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline dd,
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline-box dt,
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline-box dd {
display: inline-block;
*display: inline;
*zoom: 1;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline dt,
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline-box dt {
font-weight: bold;
padding-right: 20px;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline dt.rc-f-dl-title01,
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline-box dt.rc-f-dl-title01 {
width: 100px;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-list-inline li {
display: inline-block;
margin-right: 20px;
*display: inline;
*zoom: 1;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-dl-inline-box dt {
padding-top: 8px;
vertical-align: top;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-row {
zoom: 1;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-row:before,
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-row:after {
display: table;
content: '';
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-row:after {
clear: both;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-row .rc-f-col {
float: left;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-row4 .rc-f-col {
width: 23.475%;
margin-left: 2%;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-row4 .rc-f-col.rc-f-first {
margin-left: 0;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-nav-item {
padding: 10px 20px;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-first .rc-f-nav-item {
padding: 10px 20px 10px 0;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-media .rc-f-media-head {
font-weight: bold;
margin-bottom: 10px;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-media .rc-f-media-body {
color: #424242;
}
#footerGrpRakutenLinkArea .rc-f-standard .rcf-list-inline li {
display: inline-block;
margin-right: 15px;
*display: inline;
*zoom: 1;
}
#footerGrpRakutenLinkArea .rc-f-standard .copyright {
color: #424242;
}
#footerGrpRakutenLinkArea .rc-f-standard .logoFCB {
width: 158px;
}
#footerGrpRakutenLinkArea .rc-f-standard .footerGrpRakutenLink {
width: 844px;
font-size: 12px;
}
#footerGrpRakutenLinkArea .rc-f-standard .footerGrpRakutenLink .footerGrpRakutenLink-cpn {
margin-bottom: 5px;
}
#footerGrpRakutenLinkArea .rc-f-standard .footerGrpRakutenLink .footerGrpRakutenLinkLst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#footerGrpRakutenLinkArea .rc-f-standard .footerGrpRakutenLink .footerGrpRakutenLinkLst-item:not(:first-child) {
margin-left: 16px;
}
#footerGrpRakutenLinkArea .rc-f-standard .footerGrpRakutenLink .footerGrpRakutenLinkLst-itemLnk {
color: #686868;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-list-nav li {
border-right: 1px solid #c7c7c7;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-list-nav li.rc-f-list-nav-last {
border-right: none;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section00 {
padding: 10px 0;
border-top: 1px solid #c7c7c7;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 {
border-top: 1px solid #c7c7c7;
border-bottom: 1px solid #c7c7c7;
background: #f9f9f9;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 .rc-f-section-bar {
border-top: 1px solid #e7e7e7;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 .rc-f-section-bar.rc-f-first {
border-top: none;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 .rc-f-btn {
border: 1px solid #c7c7c7;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 .rc-f-btn span:before {
border-left: 5px solid #868686;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 .rc-f-btn:hover {
border: 1px solid #d5d5d5;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 .rc-f-btn:hover span:before {
border-left: 5px solid #9a9a9a;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 .rc-f-nav-item-delimit {
border-left: 1px dotted #c7c7c7;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content01 {
margin-bottom: 10px;
border: 1px solid #e7e7e7;
background: #f9f9f9;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-list-nav li {
border-right: 1px solid #c5cdd4;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-list-nav li.rc-f-list-nav-last {
border-right: none;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section00 {
padding: 10px 0;
border-top: 1px solid #c5cdd4;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content00 {
border-top: 1px solid #c5cdd4;
border-bottom: 1px solid #c5cdd4;
background: #f0f3f8;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content00 .rc-f-section-bar {
border-top: 1px solid #dbe4eb;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content00 .rc-f-section-bar.rc-f-first {
border-top: none;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content00 .rc-f-btn {
border: 1px solid #c5cdd4;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content00 .rc-f-btn span:before {
border-left: 5px solid #b7c3cd;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content00 .rc-f-btn:hover {
border: 1px solid #d3dae1;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content00 .rc-f-btn:hover span:before {
border-left: 5px solid #c5d1da;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content00 .rc-f-nav-item-delimit {
border-left: 1px dotted #c5cdd4;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom01 .rc-f-section-content01 {
margin-bottom: 10px;
border: 1px solid #dbe4eb;
background: #f0f3f8;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-list-nav li {
border-right: 1px solid #d3d0cb;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-list-nav li.rc-f-list-nav-last {
border-right: none;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section00 {
padding: 10px 0;
border-top: 1px solid #d3d0cb;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content00 {
border-top: 1px solid #d3d0cb;
border-bottom: 1px solid #d3d0cb;
background: #f6f5f2;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content00 .rc-f-section-bar {
border-top: 1px solid #e8e4dd;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content00 .rc-f-section-bar.rc-f-first {
border-top: none;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content00 .rc-f-btn {
border: 1px solid #d3d0cb;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content00 .rc-f-btn span:before {
border-left: 5px solid #c7c2bb;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content00 .rc-f-btn:hover {
border: 1px solid #e0ddd9;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content00 .rc-f-btn:hover span:before {
border-left: 5px solid #d5d0c9;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content00 .rc-f-nav-item-delimit {
border-left: 1px dotted #d3d0cb;
}
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom02 .rc-f-section-content01 {
margin-bottom: 10px;
border: 1px solid #e8e4dd;
background: #f6f5f2;
}
#footerRequest04,
#footerRequest05 {
font-size: 13px;
width: 950px;
text-align: left;
}
#footerRequest04 a,
#footerRequest05 a {
text-decoration: underline;
}
#footerRequest04 .left,
#footerRequest05 .left {
float: left;
}
#footerRequest04 .mr00,
#footerRequest05 .mr00 {
margin-right: 0 !important;
}
#footerRequest04 .ml10,
#footerRequest05 .ml10 {
margin-left: 10px;
}
#footerRequest04 .ml15,
#footerRequest05 .ml15 {
margin-left: 15px;
}
#footerRequest04 .taC,
#footerRequest05 .taC {
text-align: center;
}
#footerRequest04 a:hover,
#footerRequest05 a:hover,
#footerRequest04 a:focus,
#footerRequest05 a:focus {
text-decoration: none;
}
#footerRequest04 dt,
#footerRequest05 dt {
line-height: 1;
}
#footerRequest04 .ml20,
#footerRequest05 .ml20 {
margin-left: 20px !important;
}
#footerRequest04 .footHdg01,
#footerRequest05 .footHdg01 {
background: #004ea2;
padding-left: 13px;
padding-right: 13px;
color: #fff;
border-radius: 3px 3px 0 0;
line-height: 1.3;
font-weight: bold;
}
#footerRequest04 .footHdg01 > span,
#footerRequest05 .footHdg01 > span {
padding: 2px 0 2px 12px;
border-left: 6px solid #afc9e4;
}
#footerRequest04 .footBox01,
#footerRequest05 .footBox01 {
border: 3px solid #e6e6e6;
border-top: none;
padding: 20px 15px 15px 20px;
}
#footerRequest04 .footBox02,
#footerRequest05 .footBox02 {
margin-top: 7px;
margin-left: 15px;
padding-left: 10px;
background: url(/common02/img/ar04.png) 0 50% no-repeat;
font-size: 92%;
}
#footerRequest04 .footBox02 .footBoxIn,
#footerRequest05 .footBox02 .footBoxIn {
background: #e4e4e4;
padding: 8px 10px 8px 17px;
border-radius: 3px;
width: 413px;
}
#footerRequest04 .footBox02 .footBoxIn > dt + dd,
#footerRequest05 .footBox02 .footBoxIn > dt + dd {
border-left: 2px solid #fff;
padding-left: 10px;
margin-left: 12px;
}
#footerRequest04 .footLst01 > dt,
#footerRequest04 .footLst01 > dd,
#footerRequest05 .footLst01 > dt,
#footerRequest05 .footLst01 > dd {
float: left;
}
#footerRequest04 .footLst02,
#footerRequest05 .footLst02 {
margin-right: 5px;
}
#footerRequest04 .footLst02 + .footLst02,
#footerRequest05 .footLst02 + .footLst02 {
border-top: 1px solid #e6e6e6;
padding-top: 10px;
margin-top: 10px;
}
#footerRequest04 {
margin: 0 auto 15px;
}
#footerRequest04 .footHdg01 {
font-size: 138%;
padding-top: 13px;
padding-bottom: 13px;
}
#footerRequest04 .footTxt01 {
float: left;
margin-top: 8px;
margin-left: 15px;
}
#footerRequest05 {
margin: 0 auto 70px;
}
#footerRequest05 .footHdg01 {
font-size: 115%;
padding-top: 15px;
padding-bottom: 15px;
}
#footerRequest05 .footCol01 {
width: 500px;
margin-right: 11px;
}
#footerRequest05 .footCol02 {
width: 439px;
}
#footerRequest05 .footCol01,
#footerRequest05 .footCol02 {
float: left;
}
#footerRequest05 .footBox01 {
padding-bottom: 0;
min-height: 169px;
height: auto !important;
height: 169px;
}
/* For SP Device */
@media screen and (max-width: 756px) {
#footerGrpRakutenLinkArea .rc-f-standard.rc-f-custom00 .rc-f-section-content00 {
display: none;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-section01 {
padding: 15px;
}
#footerGrpRakutenLinkArea .rc-f-standard .rc-f-inner {
display: block;
width: auto;
}
#footerGrpRakutenLinkArea .rc-f-standard .footerGrpRakutenLink {
width: auto;
font-size: 10px;
}
#footerGrpRakutenLinkArea .rc-f-standard .logoFCB {
width: auto;
margin-top: 5px;
}
.pageTopWrap {
margin: 0 10px;
}
.pageTopWrap .pageTopWrap-inner {
height: 50px;
}
.pageTopWrap a {
top: 0;
}
}
/*
#overview
必須モジュール―Popup Window
【依存モジュール】
・Icons
*/
/*
#styleguide
Popup Window
※1 外部ファイル読込想定です。
※2 サイト共通モーダル格納先：/assets/modal/
※3 ルート直下ページのモーダル格納先(例)：/modal/
※4 第二階層配下ページのモーダル格納先(例)：/about/modal/
※5 挙動は/assets/js/common.jsのmodal関数に依存
※表示確認の為に、インラインスタイルを使用しています。実装では不要です。
```
```
*/
.modalWrap {
position: fixed;
top: 0;
left: 0;
z-index: 10010;
width: 100%;
height: 100vh;
}
.overLay {
background: rgba(0, 0, 0, 0.3);
height: 100vh;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body[aria-busy="true"] .modalWrap {
-webkit-animation-name: modalOpen;
animation-name: modalOpen;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
body[aria-busy="false"] .modalWrap {
-webkit-animation-name: modalClose;
animation-name: modalClose;
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes modalOpen {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes modalOpen {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes modalClose {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes modalClose {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.modal {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 10011;
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
background-color: #fff;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.modal-body {
position: relative;
max-width: 1070px;
margin: 0 auto;
}
.modal-body > .modalClose {
position: absolute;
right: 0;
top: -40px;
color: #fff;
}
.modal-body > .modalClose .rex-icon.x {
font-size: 36px;
}
.modal-bodyInner {
padding: 30px 10px;
}
.modal-bodyInner .modal-bodyInner-ttl {
margin-top: -10px;
}
.modal-bodyInner .modal-bodyInner-con {
overflow-y: auto;
max-height: 65vh;
}
.modal-bodyInner .modal-ttl {
font-size: 26px;
font-weight: bold;
margin-bottom: 10px;
}
.modal-bodyInner .qaBox-ttl {
font-size: 18px;
font-weight: bold;
}
.modal-bodyInner .qaBox-img {
margin-top: 15px;
height: 60px;
padding-right: 10px;
text-align: center;
}
.modal-bodyInner .qaBox-img img {
width: auto;
height: 38px;
}
.modal-bodyInner .qaBox-btn {
margin-top: 10px;
text-align: center;
}
.modal-bodyInner .qaBox-btn a {
border: 1px solid #828282;
display: inline-block;
padding: 5px 12px;
border-radius: 4px;
color: #828282;
text-decoration: none;
}
.modal-bodyInner .qaBox-btn a:hover {
background: #828282;
color: #fff;
}
.contactBox .contactBox-ttl {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.contactBox .contactBox-ttl.contactBox-ttl_red {
color: #bf0000;
}
.contactBox .contactTop {
font-size: 15px;
margin-bottom: 10px;
}
.contactBox .contactTop:first-child {
margin-top: 0;
}
.contactBox .contactTop .contactTop-ttl {
font-weight: bold;
margin-bottom: 5px;
}
.contactBox .contactTel {
overflow: hidden;
margin-bottom: 20px;
}
.contactBox .contactTel:last-child {
margin-bottom: 0;
}
.contactBox .contactTel .contactTel-left {
float: left;
width: calc(100% - 138px);
}
.contactBox .contactTel .contactTel-left .contactTel-num {
font-size: 20px;
font-weight: bold;
}
.contactBox .contactTel .contactTel-left .contactTel-txt {
font-size: 12px;
}
.contactBox .contactTel .contactTel-right {
float: right;
width: 128px;
padding-top: 2px;
}
.contactBox .contactTel .contactTel-right a {
border: 1px solid #828282;
display: inline-block;
padding: 5px 15px;
border-radius: 4px;
color: #828282;
text-decoration: none;
}
.contactBox .contactTel .contactTel-right a:hover {
background: #828282;
color: #fff;
}
.modal-head {
position: relative;
padding: 16px 30px;
text-align: center;
border-bottom: 1px solid #828282;
background-color: #f2f2f2;
}
.modal-head .modal-ttl {
font-size: 24px;
font-weight: 400;
line-height: 24px;
}
.modal-head .rex-icon {
position: absolute;
top: 16px;
right: 30px;
font-size: 24px;
vertical-align: bottom;
cursor: pointer;
}
.modal-lead {
font-size: 16px;
text-align: center;
margin-bottom: 20px;
}
.modal-btn {
display: block;
width: 176px;
margin: 40px auto 0;
padding: .75em 1em;
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
font-size: 16px;
line-height: 16px;
text-decoration: none;
text-align: center;
color: #686868;
vertical-align: baseline;
background-color: #fff;
border: 1px solid #686868;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.modal-btn:hover, .modal-btn:focus {
color: #fff;
background-color: #9c9c9c;
border: 1px solid #9c9c9c;
}
.modal-btn:active {
color: #fff;
background-color: #333;
border: 1px solid #333;
}
.modal-btn.btn[disabled], .pageBtnCenter .modal-btn.pageBtnCenter-btn[disabled], .modal-btn.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.modal-btn.btn[disabled]:focus, .pageBtnCenter .modal-btn.pageBtnCenter-btn[disabled]:focus, .modal-btn.btn[disabled]:active, .pageBtnCenter .modal-btn.pageBtnCenter-btn[disabled]:active, .modal-btn.btn_disabled:focus, .modal-btn.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.modal-btn.btn_disabled {
pointer-events: none;
}
.qaBox .columnRow_col3 {
margin-right: -20px;
}
.qaBox .columnRow_col3 .columnRowList {
padding-right: 20px;
}
@media screen and (max-width: 756px) {
.modal {
top: 56%;
}
.modal-bodyInner {
padding: 15px 10px 20px;
}
.modalWrap {
height: 90vh;
}
.modal-bodyInner .modal-ttl {
font-size: 20px;
margin-bottom: 10px;
}
.modal-bodyInner .qaBox-img {
height: auto;
width: 180px;
margin-top: 5px;
}
.modal-bodyInner .qaBox-img img {
height: 32px;
}
.contactBox .contactTel {
margin-bottom: 20px;
}
.modal-bodyInner .modal-bodyInner-con {
overflow-y: auto;
max-height: 55vh;
}
.modal-body a.modalClose {
display: inline-block;
}
.overLay {
cursor: pointer;
}
}
/*
#styleguide
info_link
2019.6.7
add new info_link
※お問い合わせモーダルの「混雑予想カレンダー」へリンクするモジュールを新規追加
```
```
*/
.modal .info_link a .chevron-right {
margin-left: auto;
}
.modal .info_link a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 9px 16px 10px;
font-size: 16px;
line-height: 24px;
color: #006497;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.modal .info_link a .sign-info-l {
margin-right: 24px;
}
.modal .info_link_wrap {
margin-top: 0;
color: #006497;
background-color: #ebf7fe;
border: 1px solid #c1e6fa;
border-radius: 4px;
}
.modal .info_link a:focus, .modal .info_link a:hover {
color: #008CD4;
text-decoration: none;
outline: 0;
}
.modal .info_link a:active {
color: #00496E;
text-decoration: none;
outline: 0;
}
@media screen and (max-width: 756px) {
.modal .alert .rex-icon {
margin-right: 0;
position: absolute;
top: 50%;
left: 16px;
margin-top: -12px;
}
.modal .alert_info a {
padding: 11.5px 40px 11.5px 64px;
}
}
/* ==================================================================
Layout ※基本レイアウト
================================================================== */
/*
#overview
基本レイアウト―Article
主にnews・media配下を中心に使用されているモジュール群。
*/
/*
#styleguide
Article - Title
```
おすすめの記事
記事大見出しダミー記事大見出しダミー記事大見出しダミー記事大見出しダミー記事大見出しダミー
記事中見出しダミー記事中見出しダミー記事中見出しダミー記事中見出しダミー記事中見出しダミー
```
*/
/* article - title */
.articleTtl {
font-size: 32px;
line-height: 1.25;
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
}
.articleTtl:first-child {
margin-top: 0;
}
.articleTtl.articleTtl_bd {
padding-bottom: 30px;
margin-bottom: 0;
border-bottom: 1px solid #d1d1d1;
}
.articleTtl.articleTtl_03 {
font-size: 24px;
margin-top: 30px;
padding: 15px;
margin-top: 40px;
background: #ebebeb;
}
.articleTtl_03[aria-selected="true"] .lstAcc-descTermSwitch::before {
content: "閉じる";
}
.articleTtl_03[aria-selected="true"] .lstAcc-descTermSwitchIcon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.articleTtl_03[aria-selected="false"] .lstAcc-descTermSwitch::before {
content: "詳しく見る";
}
.articleH3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
font-size: 18px;
font-weight: bold;
line-height: 24px;
margin-top: 30px;
margin-bottom: 20px;
clear: both;
}
.articleH3::before {
display: block;
content: "";
width: 3px;
margin-right: 8px;
background-color: #bf0000;
}
.articleH4 {
font-size: 16px;
font-weight: 600;
line-height: 24px;
margin-top: 20px;
margin-bottom: 10px;
}
body.page_products h2.articleTtl {
border-top: 1px solid #828282;
border-bottom: 1px solid #828282;
padding: 10px;
}
body.page_products .articleH3 {
text-align: center;
margin-bottom: 16px;
color: #bf0000;
padding: 10px 0;
display: block;
}
body.page_products .articleH3::before {
display: inline-block;
content: "";
width: 72px;
height: 1px;
margin-right: 16px;
background-color: #bf0000;
vertical-align: middle;
}
body.page_products .articleH3::after {
display: inline-block;
content: "";
width: 72px;
height: 1px;
margin-left: 16px;
background-color: #bf0000;
vertical-align: middle;
}
.articleTtl-link {
font-size: 32px;
line-height: 1.25;
margin-bottom: 30px;
color: #bf0000;
}
.articleJump-link {
font-weight: bold;
margin-bottom: 10px;
}
.articleBtn-link {
text-align: center;
margin-top: 30px;
}
.articleBtn-link a {
border: 1px solid #bf0000;
display: inline-block;
padding: 5px 15px;
border-radius: 4px;
color: #bf0000;
text-decoration: none;
width: 320px;
max-width: 100%;
margin: 10px 8px;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.articleBtn-link a:hover {
background: #bf0000;
color: #fff;
}
.articleBtn-link a:after {
color: inherit;
font-family: rex-icon;
content: "\F127";
font-size: 14px;
text-decoration: none;
margin-left: 5px;
}
.articleTtl-error {
font-size: 32px;
line-height: 1.25;
margin-bottom: 30px;
text-align: center;
}
.articleTxt-error {
text-align: center;
}
.articleBtn-error {
text-align: center;
margin-top: 30px;
}
.articleBtn-error a {
border: 1px solid #bf0000;
display: inline-block;
padding: 5px 15px;
border-radius: 4px;
color: #bf0000;
text-decoration: none;
width: 320px;
max-width: 100%;
margin: 0 8px;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.articleBtn-error a:hover {
background: #bf0000;
color: #fff;
}
.articleBtn-error a:after {
color: inherit;
font-family: rex-icon;
content: "\F127";
font-size: 14px;
text-decoration: none;
margin-left: 5px;
}
/*
#styleguide
Article - Lead / Table Of Contents
```
リードリードリードリードリードリードリードリードリードリードリードリードリードリードリードリードリードリード
目次ダミーテキスト目次ダミーテキスト目次ダミーテキスト目次ダミーテキスト
```
*/
/* article - lead */
.articleLead {
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}
/* article - table of contents(目次) */
.articleToc {
font-weight: bold;
font-size: 24px;
margin-top: 10px;
margin-bottom: 30px;
}
/*
#styleguide
Article - Detail / for News and Media Contents
```
2019/05/31
「楽天保険の総合窓口」を6月3日より開設
```
*/
/* article - detail */
.articleDetail {
padding: 30px 0;
border-top: 1px solid #828282;
border-bottom: 1px solid #828282;
}
.articleDetail .articleDetail-date {
margin-bottom: 20px;
}
.articleDetail .articleDetail-ttl {
font-size: 32px;
margin-bottom: 20px;
font-weight: bold;
}
.articleDetail .articleDetail-cat {
margin-bottom: 20px;
color: #bf0000;
}
.articleDetail .articleDetail-cat a {
color: inherit;
}
.articleDetail .articleDetail-lead {
font-size: 20px;
font-weight: bold;
}
/*
#styleguide
Article - List
```
```
*/
/* article - lead */
/* article -list */
.bg_gray .articleList {
display: block;
}
.articleList {
display: block;
padding: 30px 50px 30px 0;
color: #333;
position: relative;
border-bottom: 1px solid #d1d1d1;
}
.articleList:hover {
text-decoration: none;
background-color: #f7f7f7;
}
.articleList .rex-icon {
position: absolute;
top: 50%;
right: 0;
line-height: 1;
margin-top: -0.5em;
}
.articleList .articleList-date {
margin-bottom: 10px;
}
.articleList .articleList-ttl {
margin-bottom: 10px;
font-weight: bold;
}
.articleList .articleList-ttl a {
color: inherit;
display: block;
}
.articleList .articleList-cat {
margin-top: 10px;
color: #bf0000;
}
.articleList .articleList-cat a {
color: inherit;
}
/* article - img */
.articleImg {
text-align: center;
margin-top: 30px;
}
.articleImg img {
max-width: 100%;
height: auto;
}
.articleImgTxt {
text-align: center;
}
/*
#styleguide
Article - Box
```
商品名商品名商品名商品名
生命保険
商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ商品サマリ
この商品を見る
```
*/
/* article - box */
.articleBox {
border: 1px solid #9c9c9c;
padding: 20px;
margin-top: 30px;
}
.articleBox .articleBox-img {
float: left;
margin-right: 20px;
}
.articleBox .articleBox-ttl {
font-weight: bold;
overflow: hidden;
}
.articleBox .articleBox-cat {
color: #bf0000;
overflow: hidden;
}
.articleBox .articleBox-txt {
margin-top: 20px;
overflow: hidden;
}
.articleBox .articleBox-link {
overflow: hidden;
text-align: right;
}
.articleBox .articleBox-link .rex-icon {
font-size: 16px;
margin-left: 5px;
}
/*
#styleguide
Article - Card
```
```
*/
/* article -card */
.articleCard {
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 3px;
overflow: hidden;
height: 100%;
}
.articleCard-img img {
width: 100%;
height: auto;
cursor: pointer;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.articleCard-img img:hover {
opacity: 0.7;
}
.articleCard-inner {
padding: 20px;
}
.articleCard-top {
overflow: hidden;
margin-bottom: -5px;
}
.articleCard-bottom {
margin-top: 10px;
overflow: hidden;
}
.articleCard-cat {
color: #bf0000;
float: left;
margin-right: 10px;
margin-bottom: 5px;
}
.articleCard-cat a {
color: #bf0000;
}
.articleCard-tag {
float: left;
margin-right: -10px;
margin-top: -5px;
margin-bottom: 10px;
}
.articleCard-tag .tag-parts {
margin-right: 10px;
margin-top: 5px;
}
.articleCard.articleCard_new .articleCard-ttl:before {
content: "NEW";
border: 1px solid #bf0000;
color: #bf0000;
border-radius: 4px;
font-size: 10px;
line-height: 1;
padding: 5px 8px;
margin-right: 8px;
display: inline-block;
vertical-align: middle;
pointer-events: none;
}
.articleCard-ttl {
margin-top: 15px;
font-weight: bold;
position: relative;
}
.articleCard-ttl:first-child {
margin-top: 0;
}
.articleCard-ttl a {
color: #333;
display: inline;
vertical-align: middle;
}
.articleCard-lead {
margin-top: 10px;
}
.articleCard-lead a {
color: #333;
}
@media screen and (max-width: 756px) {
.articleLead {
margin-bottom: 10px;
}
.articleH3 {
margin-top: 25px;
margin-bottom: 10px;
}
.articleH4 {
margin-top: 15px;
margin-bottom: 5px;
}
.articleBox {
padding: 15px;
}
.articleBox .articleBox-img {
width: 33%;
margin-right: 15px;
}
.articleTtl {
font-size: 23px;
margin-top: 30px;
margin-bottom: 15px;
}
.articleImg {
margin-top: 20px;
}
.articleImg .ytMovie {
width: 100%;
padding-bottom: 56.25%;
height: 0px;
position: relative;
display: block;
}
.articleImg .ytMovie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.articleCard-inner {
padding: 15px;
}
.articleCard-lead {
display: none;
}
.articleCard-ttl {
margin-top: 10px;
}
.articleCard-img img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
.articleTtl-error {
font-size: 24px;
margin-bottom: 20px;
}
.articleTtl.articleTtl_bd {
padding-bottom: 15px;
}
.articleDetail .articleDetail-date {
margin-bottom: 10px;
}
.articleList .articleList-link {
padding: 20px 30px 20px 0;
}
.articleBox .articleBox-txt {
margin-top: 10px;
}
.articleDetail .articleDetail-cat {
margin-bottom: 10px;
}
.articleDetail {
padding: 20px 0;
}
.articleDetail .articleDetail-ttl {
font-size: 16px;
margin-bottom: 10px;
}
.articleTtl.articleTtl_03 {
margin-top: 30px;
margin-bottom: 0;
padding: 15px;
background: #ebebeb;
border: none;
font-size: 16px;
text-align: left;
}
.articleTtl.articleTtl_03:first-child {
margin-top: 0;
}
}
@media screen and (max-width: 320px) {
.articleTtl {
font-size: 21px;
}
.articleBtn-link a {
margin: 10px 0;
}
.articleBtn-error a {
margin: 0;
}
}
/*
#overview
基本レイアウト―Text
【デフォルト】
font-size: 16px;
font-weight: 400;
【継承フォントスタイル】
※1 bodyに対してline-height: 1.7;が指定されています。
※2 bodyに対して font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;が指定されています。
*/
.txt {
font-size: 16px;
font-weight: 400;
}
.txt.txt_bold {
font-weight: 600;
}
/*
#styleguide
Text
```
私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。
```
*/
/*
#styleguide
Text - Bold
```
私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。
```
*/
/*
#styleguide
Text - Lead
```
災害により被災された皆さまに
心よりお見舞い申し上げます。
```
*/
.txt_lead {
font-size: 20px;
font-weight: 600;
line-height: 30px;
text-align: center;
}
/*
#styleguide
Text - Lead Small
```
災害により被災された皆さまに
心よりお見舞い申し上げます。
```
*/
.txt_leadSmall {
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
}
/*
#styleguide
Text - Overline
```
2-2018-068(2018.6.1)
© Rakuten
```
*/
.txt_overline {
font-size: 10px;
font-weight: 400;
line-height: 15px;
}
/*
#styleguide
Text - Caption
```
楽天生命ラブは、新規契約の受付を2018年9月14日（金）をもちまして終了させていただくこととなりました。詳しくはこちらをご確認ください。
9:00～19:00、土日祝日 9:00～17:00（年末年始を除く）
```
*/
.txt_caption {
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
/*
#overview
基本レイアウト―Title
*/
/*
#styleguide
Title - h1
.ttlLv01 -【block】デフォルト, 2行, サブコピー付き
.ttlLv01-subCopy -【element】サブコピー
.ttlLv01-mainCopy -【element】メインコピー
```
保険商品一覧
保険金・給付金の
ご請求手続きについて
加入状況を選ぶ
初めて保険を検討する
```
*/
.ttlLv01 {
font-size: 46px;
font-weight: 600;
line-height: 56px;
text-align: center;
}
.ttlLv01-subCopy {
display: block;
margin-bottom: 5px;
font-size: 22px;
line-height: 22px;
color: #0783c2;
}
.ttlLv01-mainCopy {
display: block;
}
.ttlLv01::after {
display: block;
content: "";
width: 100px;
height: 2px;
margin: 13px auto 0;
background-color: #0783c2;
}
.ttlLv01.ttlLv01_insurance .ttlLv01-subCopy {
color: #0783c2;
}
.ttlLv01.ttlLv01_insurance::after {
background-color: #0783c2;
}
/*
#styleguide
Title - h1 Insurance
```
保険商品一覧
保険金・給付金の
ご請求手続きについて
加入状況を選ぶ
初めて保険を検討する
```
*/
/*
#styleguide
Title - h2
.ttlLv02 -【block】デフォルト, 2行, サブコピー付き
.ttlLv02-subCopy -【element】サブコピー
.ttlLv02-mainCopy -【element】メインコピー
```
保障のタイプを選ぶ
お客さまの声の受付から
改善までの流れ
POINT 2
いつまで保証は必要ですか？
```
*/
.ttlLv02 {
font-size: 32px;
font-weight: 400;
line-height: 40px;
text-align: center;
}
.ttlLv02-subCopy {
display: block;
margin-bottom: 4px;
font-size: 16px;
line-height: 16px;
color: #0783c2;
}
.ttlLv02-mainCopy {
display: block;
}
/*
#styleguide
Title - h3
.ttlLv03 -【block】デフォルト, 2行, サブコピー付き
.ttlLv03-subCopy -【element】サブコピー
.ttlLv03-mainCopy -【element】メインコピー
```
お客さまからの苦情内容の例
多様なご要望にお応えする
加入方法の提供
先進医療による治療を受けたときは、
通算2,000万円まで補償！
```
*/
.ttlLv03 {
font-size: 24px;
font-weight: 600;
line-height: 32px;
text-align: center;
}
.ttlLv03-subCopy {
display: block;
margin-bottom: 4px;
font-size: 16px;
line-height: 16px;
}
.ttlLv03-mainCopy {
display: block;
color: #0783c2;
}
/*
#styleguide
Title - h4
```
お子さまのいるご家族(賃貸)のケース
入院支援金額10万円、
先進医療特約付加の場合
```
*/
.ttlLv04 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
font-size: 16px;
font-weight: 300;
line-height: 24px;
}
.ttlLv04::before {
display: block;
content: "";
width: 3px;
margin-right: 8px;
background-color: #0783c2;
}
/*
#styleguide
Title - h5
```
3口ご加入で、さらに充実の保障
持ち家の場合、多くの場合で住居費が
減額できるため、必要保障額も減額できます。
```
*/
.ttlLv05 {
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
@media screen and (max-width: 756px) {
.ttlLv01 {
font-size: 28px;
font-weight: 600;
line-height: 35px;
text-align: center;
}
.ttlLv01-subCopy {
display: block;
margin-bottom: 6.5px;
font-size: 16px;
line-height: 16px;
color: #0783c2;
}
.ttlLv01-mainCopy {
display: block;
}
.ttlLv01::after {
display: block;
content: "";
width: 100px;
height: 2px;
margin: 6.5px auto 0;
background-color: #0783c2;
}
.ttlLv01.ttlLv01_insurance .ttlLv01-subCopy {
color: #0783c2;
}
.ttlLv01.ttlLv01_insurance::after {
background-color: #0783c2;
}
.ttlLv02 {
font-size: 24px;
font-weight: 400;
line-height: 32px;
text-align: center;
}
.ttlLv02-subCopy {
display: block;
margin-bottom: 2px;
font-size: 16px;
line-height: 16px;
color: #0783c2;
}
.ttlLv02-mainCopy {
display: block;
}
.ttlLv03 {
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
}
.ttlLv03-subCopy {
display: block;
margin-bottom: 4px;
font-size: 12px;
line-height: 12px;
}
.ttlLv03-mainCopy {
display: block;
color: #0783c2;
}
.ttlLv04 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
font-size: 16px;
font-weight: 300;
line-height: 24px;
}
.ttlLv04::before {
display: block;
content: "";
width: 3px;
margin-right: 8px;
background-color: #0783c2;
}
.ttlLv05 {
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
}
/* ===== 拡張レイアウト ====================*/
/* ==================================================================
Parts ※基本パーツ
================================================================== */
/*
#overview
基本パーツ―Breadcrumb
*/
/*
#styleguide
Breadcrumb
```
```
*/
.breadcrumb {
padding: 15px;
font-size: 12px;
position: relative;
z-index: 2;
}
.breadcrumb ul {
overflow: hidden;
max-width: 1072px;
margin: 0 auto;
}
.breadcrumb ul li {
float: left;
color: #828282;
margin-right: 10px;
}
.breadcrumb ul li a {
color: inherit;
padding-right: 10px;
}
.breadcrumb ul li:after {
color: inherit;
font-family: rex-icon;
content: "\F127";
font-size: 10px;
text-decoration: none;
}
.breadcrumb ul li:last-child:after {
display: none;
}
.breadcrumb + .visual,
.breadcrumb + .main {
position: relative;
margin-top: -50px;
z-index: 1;
}
@media screen and (max-width: 756px) {
.breadcrumb + .main,
.breadcrumb + .visual {
margin-top: 0;
}
.breadcrumb {
display: none;
}
}
/*
#overview
基本パーツ―Link
【依存モジュール】
・Icons
*/
/*
#styleguide
Link
```
こちら
```
*/
.lnk {
font-size: 16px;
font-weight: 400;
color: #0783c2;
text-decoration: none;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.lnk:focus, .lnk:hover {
color: #37b4f3;
text-decoration: none;
}
.lnk:active {
color: #085b7c;
}
/*
#styleguide
Link - Arrow
```
続きを読む
```
*/
.lnk_arrow {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.lnk_arrow .rex-icon {
font-size: 16px;
line-height: inherit;
margin-left: 8px;
}
/*
#styleguide
Link - Top
```
このページの先頭へ戻る
```
*/
.lnk_top {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.lnk_top .rex-icon {
font-size: 16px;
line-height: inherit;
margin-left: 8px;
}
/*
#styleguide
Link - Pdf
```
PDFはこちら
```
*/
.lnk_pdf {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.lnk_pdf .rex-icon {
font-size: 16px;
line-height: inherit;
margin-left: 8px;
}
/*
#styleguide
Link - Blank
```
詳しくはこちら
```
*/
.lnk_blank {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.lnk_blank .lnk-icon {
display: inline-block;
margin-left: 8px;
background-image: url("/assets/img/icon/ico_service_sprite.png");
background-size: 664px 640px;
background-repeat: no-repeat;
}
.lnk_blank .lnk-icon_blankLife {
background-size: 664px 640px;
background-position: -640px -91px;
width: 14px;
height: 12px;
}
.lnk_blank:focus .lnk-icon_blankLife, .lnk_blank:hover .lnk-icon_blankLife {
background-position: -640px -103px;
width: 14px;
height: 12px;
}
.lnk_blank:active .lnk-icon_blankLife {
background-position: -640px -115px;
width: 14px;
height: 12px;
}
/*
#overview
基本パーツ―List
*/
/*
#overview
List
*/
/*
#styleguide
Unordered List
```
- コンプライアンス体制
- コンプライアンス研修の実施
- 個人情報の保護と利活用について
```
*/
.lst {
font-size: 16px;
font-weight: 400;
margin-top: 0;
margin-bottom: 1em;
padding-left: 2em;
list-style: disc;
}
.lst .lst {
margin-bottom: 0;
list-style: circle;
}
/*
#styleguide
Unordered List - Notes
```
- コンプライアンス体制
- コンプライアンス研修の実施
- 個人情報の保護と利活用について
```
*/
.lst_asterisk {
list-style: none;
padding-left: 0;
}
.lst_asterisk .lst-item {
position: relative;
padding-left: 24px;
}
.lst_asterisk .lst-item::before {
position: absolute;
top: 0;
left: 0;
display: block;
content: "※";
}
/*
#styleguide
Unordered List - Plain
```
- コンプライアンス体制
- コンプライアンス研修の実施
- 個人情報の保護と利活用について
```
*/
.lst_plain,
.lst_plain .lst_plain {
list-style: none;
}
/*
#styleguide
Unordered List - Inline
```
- コンプライアンス体制
- コンプライアンス研修の実施
- 個人情報の保護と利活用について
```
*/
.lst_inline,
.lst_inline .lst_inline {
list-style: none;
padding-left: 0;
}
.lst_inline .lst-item {
display: inline-block;
padding-left: 16px;
}
.lst_inline .lst-item:first-child {
padding-left: 0;
}
/*
#styleguide
Ordered List
```
- コンプライアンス体制
- コンプライアンス研修の実施
- 個人情報の保護と利活用について
```
*/
.lstOrder {
font-size: 16px;
font-weight: 400;
margin-top: 0;
margin-bottom: 1em;
padding-left: 2em;
list-style: decimal;
}
.lstOrder .lstOrder {
margin-bottom: 0;
list-style: decimal;
}
/*
#styleguide
Ordered List - Notes
```
- コンプライアンス体制
- コンプライアンス研修の実施
- 個人情報の保護と利活用について
```
*/
.lstOrder_asterisk {
list-style: none;
padding-left: 0;
counter-reset: num;
}
.lstOrder_asterisk .lstOrder-item {
position: relative;
padding-left: 32px;
}
.lstOrder_asterisk .lstOrder-item::before {
position: absolute;
top: 0;
left: 0;
display: block;
counter-increment: num;
content: "※" counter(num, decimal);
}
/*
#styleguide
Descriptipn List - Vertical
```
- 定義リストタイトルは左寄せです
- 定義リストは用語を定義するのに最適です。定義リストは用語を定義するのに最適です。
```
*/
.lstDesc {
font: 400 16px/32px 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
}
.lstDesc-term {
font-weight: bold;
}
/*
#styleguide
Descriptipn List - Horizontal
```
- 定義リストタイトル･･･
- 定義リストは用語を定義するのに最適です。定義リストは用語を定義するのに最適です。定義リストは用語を定義するのに最適です。
```
*/
.lstDesc_horizon {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.lstDesc_horizon .lstDesc-term {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
margin-right: 16px;
}
/* other */
.numList li {
margin-top: 10px;
}
/*
#overview
基本パーツ―Button
【依存モジュール】
・Icons
*/
button.btn, .pageBtnCenter button.pageBtnCenter-btn,
input.btn,
.pageBtnCenter input.pageBtnCenter-btn {
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
button.btn[disabled], .pageBtnCenter button.pageBtnCenter-btn[disabled],
input.btn[disabled],
.pageBtnCenter input.pageBtnCenter-btn[disabled] {
-webkit-text-fill-color: #d1d1d1;
-webkit-opacity: 1;
}
.btn, .pageBtnCenter .pageBtnCenter-btn {
display: inline-block;
font-size: 16px;
line-height: 16px;
padding: .75em 1em;
text-decoration: none;
text-align: center;
vertical-align: baseline;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.btn:focus, .pageBtnCenter .pageBtnCenter-btn:focus, .btn:hover, .pageBtnCenter .pageBtnCenter-btn:hover {
text-decoration: none;
}
/*
#styleguide
Button - regular
.btn_regular
.btn_regularMedium
.btn_regularLarge
.btn_regularMonotone
.btn_regularMonotoneMedium
.btn_regularMonotoneLarge
.btn_regular[disabled], .btn_regularMonotone[disabled]
```
```
*/
.btn_regular {
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_regular:hover, .btn_regular:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_regular:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_regular.btn[disabled], .pageBtnCenter .btn_regular.pageBtnCenter-btn[disabled], .btn_regular.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_regular.btn[disabled]:hover, .pageBtnCenter .btn_regular.pageBtnCenter-btn[disabled]:hover, .btn_regular.btn[disabled]:focus, .pageBtnCenter .btn_regular.pageBtnCenter-btn[disabled]:focus, .btn_regular.btn[disabled]:active, .pageBtnCenter .btn_regular.pageBtnCenter-btn[disabled]:active, .btn_regular.btn_disabled:hover, .btn_regular.btn_disabled:focus, .btn_regular.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_regular.btn_disabled {
pointer-events: none;
}
.btn_regularMedium {
font-size: 24px;
line-height: 24px;
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_regularMedium:hover, .btn_regularMedium:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_regularMedium:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_regularMedium.btn[disabled], .pageBtnCenter .btn_regularMedium.pageBtnCenter-btn[disabled], .btn_regularMedium.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_regularMedium.btn[disabled]:hover, .pageBtnCenter .btn_regularMedium.pageBtnCenter-btn[disabled]:hover, .btn_regularMedium.btn[disabled]:focus, .pageBtnCenter .btn_regularMedium.pageBtnCenter-btn[disabled]:focus, .btn_regularMedium.btn[disabled]:active, .pageBtnCenter .btn_regularMedium.pageBtnCenter-btn[disabled]:active, .btn_regularMedium.btn_disabled:hover, .btn_regularMedium.btn_disabled:focus, .btn_regularMedium.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_regularMedium.btn_disabled {
pointer-events: none;
}
.btn_regularLarge {
font-size: 32px;
line-height: 32px;
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_regularLarge:hover, .btn_regularLarge:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_regularLarge:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_regularLarge.btn[disabled], .pageBtnCenter .btn_regularLarge.pageBtnCenter-btn[disabled], .btn_regularLarge.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_regularLarge.btn[disabled]:hover, .pageBtnCenter .btn_regularLarge.pageBtnCenter-btn[disabled]:hover, .btn_regularLarge.btn[disabled]:focus, .pageBtnCenter .btn_regularLarge.pageBtnCenter-btn[disabled]:focus, .btn_regularLarge.btn[disabled]:active, .pageBtnCenter .btn_regularLarge.pageBtnCenter-btn[disabled]:active, .btn_regularLarge.btn_disabled:hover, .btn_regularLarge.btn_disabled:focus, .btn_regularLarge.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_regularLarge.btn_disabled {
pointer-events: none;
}
.btn_regularMonotone, .pageBtnCenter .pageBtnCenter-btn {
color: #686868;
background-color: #fff;
border: 1px solid #686868;
}
.btn_regularMonotone:hover, .pageBtnCenter .pageBtnCenter-btn:hover, .btn_regularMonotone:focus, .pageBtnCenter .pageBtnCenter-btn:focus {
color: #fff;
background-color: #9c9c9c;
border: 1px solid #9c9c9c;
}
.btn_regularMonotone:active, .pageBtnCenter .pageBtnCenter-btn:active {
color: #fff;
background-color: #333;
border: 1px solid #333;
}
.btn_regularMonotone.btn[disabled], .pageBtnCenter .pageBtnCenter-btn[disabled], .btn_regularMonotone.btn_disabled, .pageBtnCenter .btn_disabled.pageBtnCenter-btn {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_regularMonotone.btn[disabled]:hover, .pageBtnCenter .pageBtnCenter-btn[disabled]:hover, .btn_regularMonotone.btn[disabled]:focus, .pageBtnCenter .pageBtnCenter-btn[disabled]:focus, .btn_regularMonotone.btn[disabled]:active, .pageBtnCenter .pageBtnCenter-btn[disabled]:active, .btn_regularMonotone.btn_disabled:hover, .pageBtnCenter .btn_disabled.pageBtnCenter-btn:hover, .btn_regularMonotone.btn_disabled:focus, .pageBtnCenter .btn_disabled.pageBtnCenter-btn:focus, .btn_regularMonotone.btn_disabled:active, .pageBtnCenter .btn_disabled.pageBtnCenter-btn:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_regularMonotone.btn_disabled, .pageBtnCenter .btn_disabled.pageBtnCenter-btn {
pointer-events: none;
}
.btn_regularMonotoneMedium {
font-size: 24px;
line-height: 24px;
color: #686868;
background-color: #fff;
border: 1px solid #686868;
}
.btn_regularMonotoneMedium:hover, .btn_regularMonotoneMedium:focus {
color: #fff;
background-color: #9c9c9c;
border: 1px solid #9c9c9c;
}
.btn_regularMonotoneMedium:active {
color: #fff;
background-color: #333;
border: 1px solid #333;
}
.btn_regularMonotoneMedium.btn[disabled], .pageBtnCenter .btn_regularMonotoneMedium.pageBtnCenter-btn[disabled], .btn_regularMonotoneMedium.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_regularMonotoneMedium.btn[disabled]:hover, .pageBtnCenter .btn_regularMonotoneMedium.pageBtnCenter-btn[disabled]:hover, .btn_regularMonotoneMedium.btn[disabled]:focus, .pageBtnCenter .btn_regularMonotoneMedium.pageBtnCenter-btn[disabled]:focus, .btn_regularMonotoneMedium.btn[disabled]:active, .pageBtnCenter .btn_regularMonotoneMedium.pageBtnCenter-btn[disabled]:active, .btn_regularMonotoneMedium.btn_disabled:hover, .btn_regularMonotoneMedium.btn_disabled:focus, .btn_regularMonotoneMedium.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_regularMonotoneMedium.btn_disabled {
pointer-events: none;
}
.btn_regularMonotoneLarge {
font-size: 32px;
line-height: 32px;
color: #686868;
background-color: #fff;
border: 1px solid #686868;
}
.btn_regularMonotoneLarge:hover, .btn_regularMonotoneLarge:focus {
color: #fff;
background-color: #9c9c9c;
border: 1px solid #9c9c9c;
}
.btn_regularMonotoneLarge:active {
color: #fff;
background-color: #333;
border: 1px solid #333;
}
.btn_regularMonotoneLarge.btn[disabled], .pageBtnCenter .btn_regularMonotoneLarge.pageBtnCenter-btn[disabled], .btn_regularMonotoneLarge.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_regularMonotoneLarge.btn[disabled]:hover, .pageBtnCenter .btn_regularMonotoneLarge.pageBtnCenter-btn[disabled]:hover, .btn_regularMonotoneLarge.btn[disabled]:focus, .pageBtnCenter .btn_regularMonotoneLarge.pageBtnCenter-btn[disabled]:focus, .btn_regularMonotoneLarge.btn[disabled]:active, .pageBtnCenter .btn_regularMonotoneLarge.pageBtnCenter-btn[disabled]:active, .btn_regularMonotoneLarge.btn_disabled:hover, .btn_regularMonotoneLarge.btn_disabled:focus, .btn_regularMonotoneLarge.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_regularMonotoneLarge.btn_disabled {
pointer-events: none;
}
/*
#styleguide
Button - primary
.btn_primary
.btn_primaryMedium
.btn_primaryLarge
.btn_primary[disabled]
```
```
*/
.btn_primary {
color: #fff;
background-color: #bf0000;
}
.btn_primary:hover, .btn_primary:focus {
background-color: #ff1212;
}
.btn_primary:active {
background-color: #960000;
}
.btn_primary.btn[disabled], .pageBtnCenter .btn_primary.pageBtnCenter-btn[disabled], .btn_primary.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_primary.btn[disabled]:hover, .pageBtnCenter .btn_primary.pageBtnCenter-btn[disabled]:hover, .btn_primary.btn[disabled]:focus, .pageBtnCenter .btn_primary.pageBtnCenter-btn[disabled]:focus, .btn_primary.btn[disabled]:active, .pageBtnCenter .btn_primary.pageBtnCenter-btn[disabled]:active, .btn_primary.btn_disabled:hover, .btn_primary.btn_disabled:focus, .btn_primary.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_primary.btn_disabled {
pointer-events: none;
}
.btn_primaryMedium {
font-size: 24px;
line-height: 24px;
color: #fff;
background-color: #bf0000;
}
.btn_primaryMedium:hover, .btn_primaryMedium:focus {
background-color: #ff1212;
}
.btn_primaryMedium:active {
background-color: #960000;
}
.btn_primaryMedium.btn[disabled], .pageBtnCenter .btn_primaryMedium.pageBtnCenter-btn[disabled], .btn_primaryMedium.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_primaryMedium.btn[disabled]:hover, .pageBtnCenter .btn_primaryMedium.pageBtnCenter-btn[disabled]:hover, .btn_primaryMedium.btn[disabled]:focus, .pageBtnCenter .btn_primaryMedium.pageBtnCenter-btn[disabled]:focus, .btn_primaryMedium.btn[disabled]:active, .pageBtnCenter .btn_primaryMedium.pageBtnCenter-btn[disabled]:active, .btn_primaryMedium.btn_disabled:hover, .btn_primaryMedium.btn_disabled:focus, .btn_primaryMedium.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_primaryMedium.btn_disabled {
pointer-events: none;
}
.btn_primaryLarge {
font-size: 32px;
line-height: 32px;
color: #fff;
background-color: #bf0000;
}
.btn_primaryLarge:hover, .btn_primaryLarge:focus {
background-color: #ff1212;
}
.btn_primaryLarge:active {
background-color: #960000;
}
.btn_primaryLarge.btn[disabled], .pageBtnCenter .btn_primaryLarge.pageBtnCenter-btn[disabled], .btn_primaryLarge.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_primaryLarge.btn[disabled]:hover, .pageBtnCenter .btn_primaryLarge.pageBtnCenter-btn[disabled]:hover, .btn_primaryLarge.btn[disabled]:focus, .pageBtnCenter .btn_primaryLarge.pageBtnCenter-btn[disabled]:focus, .btn_primaryLarge.btn[disabled]:active, .pageBtnCenter .btn_primaryLarge.pageBtnCenter-btn[disabled]:active, .btn_primaryLarge.btn_disabled:hover, .btn_primaryLarge.btn_disabled:focus, .btn_primaryLarge.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_primaryLarge.btn_disabled {
pointer-events: none;
}
/*
#styleguide
Button - secondary
.btn_secondary
.btn_secondaryTxtMedium
.btn_secondaryLarge
.btn_secondary[disabled]
.btn_secondaryTxt
.btn_secondaryTxtMedium
.btn_secondaryTxtLarge
.btn_secondaryTxt[disabled]
```
```
*/
.btn_secondary {
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_secondary:hover, .btn_secondary:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_secondary:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_secondary.btn[disabled], .pageBtnCenter .btn_secondary.pageBtnCenter-btn[disabled], .btn_secondary.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_secondary.btn[disabled]:hover, .pageBtnCenter .btn_secondary.pageBtnCenter-btn[disabled]:hover, .btn_secondary.btn[disabled]:focus, .pageBtnCenter .btn_secondary.pageBtnCenter-btn[disabled]:focus, .btn_secondary.btn[disabled]:active, .pageBtnCenter .btn_secondary.pageBtnCenter-btn[disabled]:active, .btn_secondary.btn_disabled:hover, .btn_secondary.btn_disabled:focus, .btn_secondary.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_secondary.btn_disabled {
pointer-events: none;
}
.btn_secondaryMedium {
font-size: 24px;
line-height: 24px;
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_secondaryMedium:hover, .btn_secondaryMedium:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_secondaryMedium:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_secondaryMedium.btn[disabled], .pageBtnCenter .btn_secondaryMedium.pageBtnCenter-btn[disabled], .btn_secondaryMedium.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_secondaryMedium.btn[disabled]:hover, .pageBtnCenter .btn_secondaryMedium.pageBtnCenter-btn[disabled]:hover, .btn_secondaryMedium.btn[disabled]:focus, .pageBtnCenter .btn_secondaryMedium.pageBtnCenter-btn[disabled]:focus, .btn_secondaryMedium.btn[disabled]:active, .pageBtnCenter .btn_secondaryMedium.pageBtnCenter-btn[disabled]:active, .btn_secondaryMedium.btn_disabled:hover, .btn_secondaryMedium.btn_disabled:focus, .btn_secondaryMedium.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_secondaryMedium.btn_disabled {
pointer-events: none;
}
.btn_secondaryLarge {
font-size: 32px;
line-height: 32px;
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_secondaryLarge:hover, .btn_secondaryLarge:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_secondaryLarge:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_secondaryLarge.btn[disabled], .pageBtnCenter .btn_secondaryLarge.pageBtnCenter-btn[disabled], .btn_secondaryLarge.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_secondaryLarge.btn[disabled]:hover, .pageBtnCenter .btn_secondaryLarge.pageBtnCenter-btn[disabled]:hover, .btn_secondaryLarge.btn[disabled]:focus, .pageBtnCenter .btn_secondaryLarge.pageBtnCenter-btn[disabled]:focus, .btn_secondaryLarge.btn[disabled]:active, .pageBtnCenter .btn_secondaryLarge.pageBtnCenter-btn[disabled]:active, .btn_secondaryLarge.btn_disabled:hover, .btn_secondaryLarge.btn_disabled:focus, .btn_secondaryLarge.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_secondaryLarge.btn_disabled {
pointer-events: none;
}
.btn_secondaryTxt {
color: #bf0000;
background-color: transparent;
}
.btn_secondaryTxt:hover, .btn_secondaryTxt:focus {
color: #ff1212;
}
.btn_secondaryTxt:active {
color: #960000;
}
.btn_secondaryTxt.btn[disabled], .pageBtnCenter .btn_secondaryTxt.pageBtnCenter-btn[disabled], .btn_secondaryTxt.btn_disabled {
color: #d1d1d1;
cursor: not-allowed;
}
.btn_secondaryTxt.btn[disabled]:hover, .pageBtnCenter .btn_secondaryTxt.pageBtnCenter-btn[disabled]:hover, .btn_secondaryTxt.btn[disabled]:focus, .pageBtnCenter .btn_secondaryTxt.pageBtnCenter-btn[disabled]:focus, .btn_secondaryTxt.btn[disabled]:active, .pageBtnCenter .btn_secondaryTxt.pageBtnCenter-btn[disabled]:active, .btn_secondaryTxt.btn_disabled:hover, .btn_secondaryTxt.btn_disabled:focus, .btn_secondaryTxt.btn_disabled:active {
color: #d1d1d1;
}
.btn_secondaryTxt.btn_disabled {
pointer-events: none;
}
.btn_secondaryTxtMedium {
font-size: 24px;
line-height: 24px;
color: #bf0000;
background-color: transparent;
}
.btn_secondaryTxtMedium:hover, .btn_secondaryTxtMedium:focus {
color: #ff1212;
}
.btn_secondaryTxtMedium:active {
color: #960000;
}
.btn_secondaryTxtMedium.btn[disabled], .pageBtnCenter .btn_secondaryTxtMedium.pageBtnCenter-btn[disabled], .btn_secondaryTxtMedium.btn_disabled {
color: #d1d1d1;
cursor: not-allowed;
}
.btn_secondaryTxtMedium.btn[disabled]:hover, .pageBtnCenter .btn_secondaryTxtMedium.pageBtnCenter-btn[disabled]:hover, .btn_secondaryTxtMedium.btn[disabled]:focus, .pageBtnCenter .btn_secondaryTxtMedium.pageBtnCenter-btn[disabled]:focus, .btn_secondaryTxtMedium.btn[disabled]:active, .pageBtnCenter .btn_secondaryTxtMedium.pageBtnCenter-btn[disabled]:active, .btn_secondaryTxtMedium.btn_disabled:hover, .btn_secondaryTxtMedium.btn_disabled:focus, .btn_secondaryTxtMedium.btn_disabled:active {
color: #d1d1d1;
}
.btn_secondaryTxtMedium.btn_disabled {
pointer-events: none;
}
.btn_secondaryTxtLarge {
font-size: 32px;
line-height: 32px;
color: #bf0000;
background-color: transparent;
}
.btn_secondaryTxtLarge:hover, .btn_secondaryTxtLarge:focus {
color: #ff1212;
}
.btn_secondaryTxtLarge:active {
color: #960000;
}
.btn_secondaryTxtLarge.btn[disabled], .pageBtnCenter .btn_secondaryTxtLarge.pageBtnCenter-btn[disabled], .btn_secondaryTxtLarge.btn_disabled {
color: #d1d1d1;
cursor: not-allowed;
}
.btn_secondaryTxtLarge.btn[disabled]:hover, .pageBtnCenter .btn_secondaryTxtLarge.pageBtnCenter-btn[disabled]:hover, .btn_secondaryTxtLarge.btn[disabled]:focus, .pageBtnCenter .btn_secondaryTxtLarge.pageBtnCenter-btn[disabled]:focus, .btn_secondaryTxtLarge.btn[disabled]:active, .pageBtnCenter .btn_secondaryTxtLarge.pageBtnCenter-btn[disabled]:active, .btn_secondaryTxtLarge.btn_disabled:hover, .btn_secondaryTxtLarge.btn_disabled:focus, .btn_secondaryTxtLarge.btn_disabled:active {
color: #d1d1d1;
}
.btn_secondaryTxtLarge.btn_disabled {
pointer-events: none;
}
/*
#styleguide
Button - icon
.btn_withIcon
.btn_withIconMedium
.btn_withIconLarge
.btn_withIcon[disabled]
```
```
*/
.btn_withIcon {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_withIcon:hover, .btn_withIcon:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_withIcon:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_withIcon.btn[disabled], .pageBtnCenter .btn_withIcon.pageBtnCenter-btn[disabled], .btn_withIcon.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_withIcon.btn[disabled]:hover, .pageBtnCenter .btn_withIcon.pageBtnCenter-btn[disabled]:hover, .btn_withIcon.btn[disabled]:focus, .pageBtnCenter .btn_withIcon.pageBtnCenter-btn[disabled]:focus, .btn_withIcon.btn[disabled]:active, .pageBtnCenter .btn_withIcon.pageBtnCenter-btn[disabled]:active, .btn_withIcon.btn_disabled:hover, .btn_withIcon.btn_disabled:focus, .btn_withIcon.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_withIcon.btn_disabled {
pointer-events: none;
}
.btn_withIcon .rex-icon {
font-size: 16px;
margin-right: 0.5em;
}
.btn_withIconMedium {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 24px;
line-height: 24px;
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_withIconMedium:hover, .btn_withIconMedium:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_withIconMedium:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_withIconMedium.btn[disabled], .pageBtnCenter .btn_withIconMedium.pageBtnCenter-btn[disabled], .btn_withIconMedium.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_withIconMedium.btn[disabled]:hover, .pageBtnCenter .btn_withIconMedium.pageBtnCenter-btn[disabled]:hover, .btn_withIconMedium.btn[disabled]:focus, .pageBtnCenter .btn_withIconMedium.pageBtnCenter-btn[disabled]:focus, .btn_withIconMedium.btn[disabled]:active, .pageBtnCenter .btn_withIconMedium.pageBtnCenter-btn[disabled]:active, .btn_withIconMedium.btn_disabled:hover, .btn_withIconMedium.btn_disabled:focus, .btn_withIconMedium.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_withIconMedium.btn_disabled {
pointer-events: none;
}
.btn_withIconMedium .rex-icon {
font-size: 24px;
margin-right: 0.5em;
}
.btn_withIconLarge {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 32px;
line-height: 32px;
color: #bf0000;
background-color: #fff;
border: 1px solid #bf0000;
}
.btn_withIconLarge:hover, .btn_withIconLarge:focus {
color: #fff;
background-color: #ff1212;
border: 1px solid #ff1212;
}
.btn_withIconLarge:active {
color: #fff;
background-color: #960000;
border: 1px solid #960000;
}
.btn_withIconLarge.btn[disabled], .pageBtnCenter .btn_withIconLarge.pageBtnCenter-btn[disabled], .btn_withIconLarge.btn_disabled {
color: #d1d1d1;
background-color: #ebebeb;
border: 1px solid transparent;
cursor: not-allowed;
}
.btn_withIconLarge.btn[disabled]:hover, .pageBtnCenter .btn_withIconLarge.pageBtnCenter-btn[disabled]:hover, .btn_withIconLarge.btn[disabled]:focus, .pageBtnCenter .btn_withIconLarge.pageBtnCenter-btn[disabled]:focus, .btn_withIconLarge.btn[disabled]:active, .pageBtnCenter .btn_withIconLarge.pageBtnCenter-btn[disabled]:active, .btn_withIconLarge.btn_disabled:hover, .btn_withIconLarge.btn_disabled:focus, .btn_withIconLarge.btn_disabled:active {
background-color: #ebebeb;
border: 1px solid transparent;
}
.btn_withIconLarge.btn_disabled {
pointer-events: none;
}
.btn_withIconLarge .rex-icon {
font-size: 32px;
margin-right: 0.5em;
}
/*
#styleguide
Button - Circular
.btnCircular_prev
.btnCircular_next
.btnCircular_top
```
```
*/
button.btnCircular {
cursor: pointer;
}
.btnCircular {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
color: #d1d1d1;
background-color: transparent;
border: 1px solid #d1d1d1;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.btnCircular .rex-icon {
position: absolute;
top: -1px;
}
.btnCircular .rex-icon::before {
line-height: 40px;
}
.btnCircular:hover, .btnCircular:focus {
color: #0783c2;
background-color: transparent;
border: 1px solid #0783c2;
}
.btnCircular:active {
color: #085b7c;
background-color: transparent;
border: 1px solid #085b7c;
}
.btnCircular_prev .rex-icon {
left: 6px;
}
.btnCircular_next .rex-icon {
right: 6px;
}
.btnCircular_top .rex-icon {
left: 7px;
}
/*
#styleguide
Button - Copy
※shared/js/common.js内のclipToggle関数でURLコピー機能実装
```
URLをコピー
```
*/
.copy-button {
display: inline-block;
font-size: 10px;
background: #f2901d;
color: #fff;
padding: 5px;
border-radius: 4px;
cursor: pointer;
}
.copy-button:hover {
background: #d47b12;
}
/*
#styleguide
Button - Social Group - Default
```
```
*/
.snsToolSecWrapper {
margin: 40px 0;
}
.snsToolSec {
position: relative;
overflow: hidden;
}
.socialBtns {
position: relative;
left: 0;
float: left;
}
.socialBtns li {
position: relative;
left: 0;
float: left;
line-height: 1;
padding: 0 10px;
}
.socialBtns li:first-child {
padding-left: 0;
}
@media screen and (max-width: 756px) {
.snsToolSecWrapper {
margin: 20px 0 30px;
}
.socialBtns li {
padding: 0 5px;
}
}
@media screen and (max-width: 320px) {
.socialBtns li:last-child {
padding: 5px 0 0;
}
}
/*
#styleguide
Button - Social Group - Image
.btnSocial.btnSocial_fb - Facebook
.btnSocial.btnSocial_tw - Twitter
.btnSocial.btnSocial_ln - LINE
※デザイン指定(アイコン化)故に、今までのコードは利用出来ません。運用も変わってきます。
【】内の内容はphpまたはjsでurl・title・discriptionを自動出力する形が理想。
```
```
*/
.socialBtnsLst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 200px;
margin: 0 auto;
}
.btnSocial {
cursor: pointer;
}
/* Other Buttons */
/*
#styleguide
Button - pageBtnCenter - Image
.pageBtnCenter
```
```
*/
.pageBtnCenter {
overflow: hidden;
margin: 40px 0;
text-align: center;
}
.centerBtn {
text-align: center;
overflow: hidden;
display: block;
clear: both;
margin-top: 20px;
}
.centerBtn .lstToggle-btn {
width: 172px;
}
.centerBtn .centerBtn-link {
border: 1px solid #828282;
display: inline-block;
padding: 5px 15px;
border-radius: 4px;
color: #828282;
text-decoration: none;
}
.centerBtn .centerBtn-link:hover {
background: #828282;
color: #fff;
}
.more-btn {
display: inline-block;
padding: .55em 1.5em;
font-size: 16px;
text-decoration: none;
text-align: center;
vertical-align: baseline;
color: #686868;
border: 1px solid #686868;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.more-btn:hover, .more-btn:focus {
text-decoration: none;
color: #fff;
background-color: #9c9c9c;
border: 1px solid #9c9c9c;
}
@media screen and (max-width: 756px) {
.centerBtn .lstToggle-btn {
width: 100%;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.centerBtn {
margin-top: 20px;
}
}
@media screen and (max-width: 320px) {
.pageBtnCenter {
margin: 20px 0 0;
}
}
/*
#overview
+拡張パーツ―Alert
【依存モジュール】
・Icons
*/
/*
#styleguide
Alert - Toast
```
Success message
Info message
Warning message
Danger message
挙動確認用テストページ(別ウィンドウが開きます)
```
*/
.alert {
position: fixed;
top: 0;
left: 0;
z-index: 10020;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
padding: 11.5px 20px 11.5px 18px;
word-break: break-all;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: margin-top 0.2s cubic-bezier(0.45, 0, 1, 1);
transition: margin-top 0.2s cubic-bezier(0.45, 0, 1, 1);
}
.alert.alert_success {
color: #047205;
background-color: #ebf7ec;
border: 1px solid #c2e6c2;
}
.alert.alert_info {
color: #006497;
background-color: #ebf7fe;
border: 1px solid #c1e6fa;
}
.alert.alert_warning {
color: #9f4600;
background-color: #fef3eb;
border: 1px solid #fbdac1;
}
.alert.alert_danger {
color: #df0101;
background-color: #fff0f0;
border: 1px solid #ffcfcf;
}
.alert .rex-icon {
margin-right: 22px;
}
.alert .alert-txt {
font-size: 16px;
font-weight: 400;
line-height: 32px;
}
.alert-btnClose {
margin-left: auto;
color: inherit;
background-color: transparent;
-webkit-appearance: none;
padding: 0;
border-width: 0px;
border-style: initial;
border-color: initial;
-webkit-border-image: initial;
-o-border-image: initial;
border-image: initial;
cursor: pointer;
}
.alert-btnClose .rex-icon {
font-size: 19px;
margin-right: 0;
vertical-align: middle;
}
.alert-btnClose:focus {
outline: none;
}
/*
#styleguide
Alert - Description
```
- Title
-
-
Message
-
Message
-
Message
-
Message
```
*/
.alertDesc {
word-break: break-all;
border-radius: 4px;
padding: 10px 18px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.alertDesc.alertDesc_danger {
color: #df0101;
background-color: #fff0f0;
border: 1px solid #ffcfcf;
}
.alertDesc-term {
font-size: 16px;
font-weight: 600;
line-height: 32px;
margin-bottom: 4px;
}
.alertDesc-dfnLstItem {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 4px;
}
.alertDesc-dfnLstItem:last-child {
margin-bottom: 0;
}
.alertDesc-dfnLstItem .rex-icon {
font-size: 16px;
margin-right: 14px;
}
.alertDesc-txt {
font: 400 16px/32px 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
}
/* ===== 拡張パーツ ====================*/
/* ==================================================================
function ※拡張機能
================================================================== */
/*
#overview
+機能モジュール―Tab
※使用ページ /index.html, /company/, etc...
*/
/*
#styleguide
Tab
※1 タブ切替の挙動はshared/js/common.jsの『タブ切り替え』コメントに依存。
※2 デザイン調整の為、index.scssでoverrideしている。
```
```
*/
.normalTab {
margin-top: 40px;
}
.normalTab:after {
content: "";
clear: both;
display: block;
}
.normalTab:first-child {
margin-top: 0;
}
.normalTab .tabTitle {
position: relative;
z-index: 2;
}
.normalTab .tabTitle > ul {
display: table;
width: calc(100% + 20px);
table-layout: fixed;
border-collapse: separate;
border-spacing: 10px 0px;
margin-right: -10px;
margin-left: -10px;
}
.normalTab .tabTitle > ul > li {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 50px;
font-size: 26px;
cursor: pointer;
border-radius: 4px 4px 0 0;
border: 4px solid #bf0000;
border-bottom: none;
color: #fff;
background: #bf0000;
position: relative;
}
.normalTab .tabTitle > ul > li.cur {
border: 4px solid #e6e6e6;
border-bottom: none;
color: #000;
background: #fff;
font-weight: bold;
}
.normalTab .tabTitle > ul > li a {
display: block;
color: inherit;
}
.normalTab .tabTitle > ul > li a span {
display: inline-block;
position: relative;
}
.normalTab .tabTitle > ul > li a span:after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
display: inline-block;
font: normal 24px rex-icon;
content: "\F127";
margin-left: 5px;
vertical-align: middle;
}
.normalTab .tabContents {
z-index: 1;
}
.normalTab .tabContents {
-webkit-box-shadow: 0px -4px 0px 0px #e6e6e6;
box-shadow: 0px -4px 0px 0px #e6e6e6;
}
.normalTab .tabContents > ul > li {
display: none;
}
.normalTab .tabContents > ul > li.cur {
display: block;
}
.normalTab .tabContents > ul > li .tabContentsListInner {
padding: 50px 0 20px;
}
@media screen and (max-width: 756px) {
.normalTab {
margin-top: 20px;
}
.normalTab .tabTitle {
overflow: hidden;
}
.normalTab .tabTitle ul li {
font-size: 18px;
line-height: 1.25;
height: 60px;
}
.normalTab .tabContents li .tabContentsListInner {
padding: 20px 0;
}
.normalTab .tabTitle > ul > li a span:after {
font-size: 18px;
}
}
/*
#overview
+機能モジュール―Pr Carousel
※仕様ページ /index.html ,/event/ ,/faq/
*/
/*
#styleguide
Pr Carousel
```
PR
以下の広告に掲示されているポイント等の付与は、各広告元より付与されるものです。
PR
広告に掲示されているポイント等の付与は、各広告元より付与されるものです。
```
*/
.bannerArea {
border-top: 1px solid #808080;
margin: 10px auto 0 auto;
padding: 15px 0 30px;
position: relative;
text-align: center;
width: 1070px;
}
.bannerArea .pr {
background: #808080 none repeat scroll 0 0;
color: #fff;
font-size: 11px;
font-weight: bold;
left: 0;
line-height: 1;
padding: 2px 0 4px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.bannerArea .grdText {
color: #808080;
font-size: .81em;
letter-spacing: .05em;
}
.bannerArea a:hover img {
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
}
.topBankArea {
padding-top: 30px;
}
.carouselSec {
background: #ffffff;
}
.carouselContainer {
display: none;
}
.carouselArea ul {
margin: 20px 0;
}
.carouselArea ul li {
float: left;
margin-right: 25px;
}
.carouselArea ul li.mgr0 {
margin-right: 0;
}
.prWrapper {
width: 790px;
margin: 0 auto;
padding-left: 12px;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#prCarouseContainer {
width: 790px;
}
#prCarouseContainer .bnr_pr_01 dt {
/* 楽天銀行 */
background-image: url(/assets/img/group/logo_pr_bank.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_02 dt {
/* 楽天カード */
background-image: url(/assets/img/group/logo_pr_card.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_03 dt {
/* 楽天証券 */
background-image: url(/assets/img/group/logo_pr_brokerage.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_04 dt {
/* 楽天スーパーナイター */
background-image: url(/assets/img/group/logo_pr_supernighter.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_05 dt {
/* 楽天kobo */
background-image: url(/assets/img/group/logo_pr_kobo.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_06 dt {
/* 楽天TV */
background-image: url(/assets/img/group/logo_pr_tv.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_07 dt {
/* 楽天ふるさと納税 */
background-image: url(/assets/img/group/logo_pr_life.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_08 dt {
/* 楽天エナジー */
background-image: url(/assets/img/group/logo_pr_energy.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_09 dt {
/* (R) Rakuten */
background-image: url(/assets/img/group/logo_pr_rakuten.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_10 dt {
/* 楽天損保 */
background-image: url(/assets/img/group/logo_pr_generalinsurance.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_11 dt {
/* 楽天少額短期保険 */
background-image: url(/assets/img/group/logo_pr_pet.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_12 dt {
/* 楽天GORA */
background-image: url(/assets/img/group/logo_pr_gora.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_13 dt {
/* 楽天買取 */
background-image: url(/assets/img/group/logo_pr_buyback.jpg);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_14 dt {
/* 楽天 */
background-image: url(/assets/img/group/logo_pr_rakuten.png);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer .bnr_pr_15 dt {
/* 楽天BRAND AVENUE */
background-image: url(/assets/img/group/logo_pr_brandavenue.jpg);
height: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#prCarouseContainer dl dt {
margin-bottom: 8px;
background-repeat: no-repeat;
background-position: top center;
background-size: 173px 30px;
}
#prCarouseContainer .slick-slide img {
margin: 0;
width: 174px;
}
#prCarouseContainer a:focus {
outline: none;
}
/* For SP Device */
@media screen and (max-width: 756px) {
.bannerArea {
width: 100%;
border-top: none;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 15px 10px;
max-width: 500px;
}
.bannerArea .slick-slide {
margin-right: 7px;
}
.bannerArea ul li img {
width: 100%;
height: auto;
}
.bannerArea .prLogo {
margin-bottom: 4px;
}
.bannerArea .pr {
color: #333;
background: none;
}
.bannerArea .grdText {
text-align: left;
color: #686868;
margin-top: 10px;
}
.dotsContainer {
margin-top: 15px;
}
.slick-dots li {
padding: 0 5px;
font-size: 12px;
}
.topBankArea {
display: none;
}
}
/* Vendor================================================================== */
/* Slider */
.slick-slider {
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
margin: 0 auto;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Arrows */
.slick-prev {
position: absolute;
top: 50%;
left: -70px;
width: 41px;
height: 40px;
background: url("/assets/img/ico_carousel_left_01.png");
cursor: pointer;
}
.slick-next {
position: absolute;
top: 50%;
right: -50px;
width: 41px;
height: 40px;
background: url("/assets/img/ico_carousel_right_01.png");
cursor: pointer;
}
.slick-prev:hover,
.slick-next:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
}
.dotsContainer {
position: relative;
overflow: hidden;
}
ul.slick-dots {
position: relative;
left: 50%;
float: left;
}
.slick-dots li {
position: relative;
left: -50%;
float: left;
cursor: pointer;
color: #ccd8e0;
}
.slick-dots li.slick-active,
.slick-dots li:hover {
color: #85a6ba;
}
/* ==================================================================
Extension module ※MW作成拡張モジュール
================================================================== */
/* ==================================================================
既存styleguide仕様の上書き
================================================================== */
@media screen and (max-width: 756px) {
header {
height: inherit;
}
}
.rc-h-fixed-bar {
display: none !important;
}
/* ==================================================================
変数・mixin
================================================================== */
/* ==================================================================
reset
================================================================== */
body {
line-height: 1.5;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: inherit;
}
/* ==================================================================
ヘッダ
================================================================== */
#grpheader .rc-h-txt a {
text-decoration: underline;
}
/* ==================================================================
パンくず
================================================================== */
@media screen and (min-width: 757px) {
.breadcrumb-hikaku .breadcrumb__inner {
width: 1074px;
margin: 0 auto;
}
}
@media screen and (max-width: 756px) {
.breadcrumb-hikaku .breadcrumb__inner {
padding: 0 16px;
}
}
.breadcrumb-hikaku .breadcrumb__inner .mod-pankuzu__list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 16px 0;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 756px) {
.breadcrumb-hikaku .breadcrumb__inner .mod-pankuzu__list {
padding: 8px 0;
}
}
.breadcrumb-hikaku .breadcrumb__inner .mod-pankuzu__list li {
font-size: 12px;
margin-right: 9px;
color: #686868;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 757px) {
.breadcrumb-hikaku .breadcrumb__inner .mod-pankuzu__list li {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
}
}
.breadcrumb-hikaku .breadcrumb__inner .mod-pankuzu__list li a {
color: #686868;
text-decoration: none;
padding-right: 8px;
}
.breadcrumb-hikaku .breadcrumb__inner .mod-pankuzu__list li i {
font-size: 12px;
}
@media screen and (max-width: 756px) {
.breadcrumb-hikaku .breadcrumb__inner .mod-pankuzu__list li i {
display: inline !important;
margin-right: 8px;
}
}
#body-list .breadcrumb-hikaku {
background-color: #ebebeb;
}
/* ==================================================================
アコーディオン
================================================================== */
.hikaku-accordion_trigger {
max-width: 300px;
margin-right: auto;
margin-left: auto;
font-weight: 300;
line-height: 1.3;
}
@media screen and (max-width: 756px) {
.hikaku-accordion_trigger {
max-width: none;
}
}
.hikaku-accordion_trigger:nth-child(n+2) {
margin-top: 24px;
}
.hikaku-accordion_trigger > a,
.hikaku-accordion_trigger > button {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
border: 1px solid #0783c2;
border-radius: 4px;
padding: 14px 15px 15px;
color: #0783c2;
text-align: center;
-webkit-transition: color .3s ease, background-color .3s ease;
transition: color .3s ease, background-color .3s ease;
}
.hikaku-accordion_trigger > a > i,
.hikaku-accordion_trigger > button > i {
position: relative;
top: -2px;
width: 20px;
height: 20px;
margin-left: 8px;
font-size: 12px;
border-radius: 50%;
vertical-align: middle;
background-color: #b6b6b6;
color: #fff;
-webkit-transition: -webkit-transform .3s ease;
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
}
.hikaku-accordion_trigger > a > i::before,
.hikaku-accordion_trigger > button > i::before {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 2px;
left: 0;
right: 2px;
bottom: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.hikaku-accordion_trigger > a:hover, .hikaku-accordion_trigger > a:active, .hikaku-accordion_trigger > a:focus,
.hikaku-accordion_trigger > button:hover,
.hikaku-accordion_trigger > button:active,
.hikaku-accordion_trigger > button:focus {
text-decoration: none;
}
.hikaku-accordion_trigger > a:hover,
.hikaku-accordion_trigger > button:hover {
background-color: #0783c2;
color: #fff;
}
.hikaku-accordion_trigger > a[aria-selected="true"] > i,
.hikaku-accordion_trigger > button[aria-selected="true"] > i {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.hikaku-accordion_content {
display: none;
}
.hikaku-accordion_content[aria-expanded="true"] {
display: block;
}
/* ==================================================================
モーダル
================================================================== */
.hikaku-modal-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 2001;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
}
.hikaku-modal-wrap[aria-opened="opened"] {
opacity: 1;
pointer-events: auto;
}
.hikaku-modal {
position: relative;
max-width: calc(100% - 90px);
}
@media screen and (max-width: 756px) {
.hikaku-modal {
max-width: calc(100% - 32px);
}
}
.hikaku-modal-wrap.opt-full .hikaku-modal {
width: 868px;
}
@media screen and (max-width: 756px) {
.hikaku-modal-wrap.opt-full .hikaku-modal {
width: 100%;
max-width: none;
height: 100%;
}
}
.hikaku-modal_close {
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
}
.hikaku-modal_close > button {
position: relative;
}
.hikaku-modal_close > button > i {
color: #333;
-webkit-transition: color .3s ease;
transition: color .3s ease;
}
.hikaku-modal_close > button > span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.hikaku-modal_close > button:hover > i {
color: #0783c2;
}
.hikaku-modal-wrap.opt-full .hikaku-modal_close {
top: 17px;
right: 18px;
}
.hikaku-modal_inner {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-height: calc(100vh - 90px);
border-radius: 4px;
background-color: #fff;
overflow-x: hidden;
overflow-y: auto;
}
.hikaku-modal-wrap.opt-full .hikaku-modal_inner {
overflow-y: hidden;
}
@media screen and (max-width: 756px) {
.hikaku-modal-wrap.opt-full .hikaku-modal_inner {
border-radius: 0;
height: 100%;
max-height: none;
}
}
.hikaku-modal-wrap.opt-full .hikaku-modal_inner.hikaku-modal__opt {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
-webkit-transition: -webkit-transform .4s linear;
transition: -webkit-transform .4s linear;
transition: transform .4s linear;
transition: transform .4s linear, -webkit-transform .4s linear;
}
.hikaku-modal-wrap.opt-full .hikaku-modal_inner.hikaku-modal__opt[aria-expanded="false"] {
-webkit-transform: translateX(100%);
transform: translateX(100%);
right: -100vw;
}
.hikaku-modal_header {
position: absolute;
top: 0;
left: 0;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 63px;
font-size: 18px;
font-weight: 300;
line-height: 1.3;
background-color: #fff;
}
.hikaku-modal_body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 48px 40px 40px;
}
@media screen and (max-width: 756px) {
.hikaku-modal_body {
padding: 46px 24px 32px;
}
}
.hikaku-modal-wrap.opt-full .hikaku-modal_body {
max-height: calc(100vh - 90px - 63px - 85px);
margin: 63px 0 85px;
border-top: 1px solid #d1d1d1;
padding: 24px;
overflow-x: hidden;
overflow-y: auto;
}
@media screen and (max-width: 756px) {
.hikaku-modal-wrap.opt-full .hikaku-modal_body {
height: calc(100% - 63px - 85px);
max-height: none;
padding: 24px 0;
}
}
.hikaku-modal-wrap.opt-full .hikaku-modal_body.opt-footer-none {
max-height: calc(100vh - 90px - 63px);
margin-bottom: 0;
}
@media screen and (max-width: 756px) {
.hikaku-modal-wrap.opt-full .hikaku-modal_body.opt-footer-none {
height: calc(100% - 63px);
max-height: none;
}
}
.hikaku-modal-wrap.opt-full .hikaku-modal_inner.hikaku-modal__opt .hikaku-modal_body {
max-height: calc(100% - 63px - 85px);
}
.hikaku-modal-wrap.opt-full .hikaku-modal_inner.hikaku-modal__opt .hikaku-modal_body.opt-footer-none {
max-height: calc(100% - 63px);
margin-bottom: 0;
}
.hikaku-modal_footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 85px;
border-top: 1px solid #d1d1d1;
background-color: #fff;
}
.hikaku-modal_order {
margin-bottom: 16px;
}
.hikaku-modal_order .order-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (min-width: 757px) {
.hikaku-modal_order .order-list {
margin-left: -24px;
}
}
@media screen and (max-width: 756px) {
.hikaku-modal_order .order-list {
padding: 0 16px;
margin-left: -20px;
}
}
.hikaku-modal_order .order-list .order-item {
margin: 0 0 20px 20px;
min-width: 101px;
border-bottom: 1px solid #d1d1d1;
}
@media screen and (min-width: 757px) {
.hikaku-modal_order .order-list .order-item {
margin: 0 0 16px 24px;
}
}
@media screen and (max-width: 756px) {
.hikaku-modal_order .order-list .order-item {
margin: 0 0 16px 20px;
}
}
.hikaku-modal_order .order-list .order-item a {
color: #333;
display: block;
position: relative;
padding-bottom: 4px;
text-decoration: none;
padding-right: 15px;
tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: all .3s;
transition: all .3s;
}
.hikaku-modal_order .order-list .order-item a::after {
content: '';
position: absolute;
display: block;
width: 8px;
height: 8px;
border-top: 1px solid #1288c5;
border-right: 1px solid #1288c5;
-webkit-transform: translateY(-50%) rotate(135deg);
transform: translateY(-50%) rotate(135deg);
top: calc(50% - 5px);
right: 3px;
-webkit-transition: all .3s;
transition: all .3s;
}
.hikaku-modal_order .order-list .order-item a:hover {
color: #37b4f3;
}
.hikaku-modal_order .order-list .order-item a:hover::after {
border-color: #37b4f3;
}
/* ==================================================================
ボタン
================================================================== */
.hikaku-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-weight: 600;
line-height: 1.3;
}
.hikaku-button:nth-child(n+2) {
margin-top: 24px;
}
@media screen and (max-width: 756px) {
.hikaku-button:nth-child(n+2) {
margin-top: 16px;
}
}
.hikaku-button > button,
.hikaku-button > a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
min-height: 52px;
border-radius: 4px;
padding: 5px;
background-color: #0783c2;
color: #fff;
-webkit-transition: background-color .3s ease;
transition: background-color .3s ease;
}
.hikaku-button > button:hover,
.hikaku-button > a:hover {
background-color: #37b4f3;
}
.hikaku-button.opt-width-100px {
width: 100px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-101px {
width: 101px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-102px {
width: 102px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-103px {
width: 103px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-104px {
width: 104px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-105px {
width: 105px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-106px {
width: 106px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-107px {
width: 107px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-108px {
width: 108px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-109px {
width: 109px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-110px {
width: 110px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-111px {
width: 111px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-112px {
width: 112px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-113px {
width: 113px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-114px {
width: 114px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-115px {
width: 115px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-116px {
width: 116px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-117px {
width: 117px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-118px {
width: 118px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-119px {
width: 119px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-120px {
width: 120px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-121px {
width: 121px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-122px {
width: 122px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-123px {
width: 123px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-124px {
width: 124px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-125px {
width: 125px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-126px {
width: 126px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-127px {
width: 127px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-128px {
width: 128px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-129px {
width: 129px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-130px {
width: 130px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-131px {
width: 131px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-132px {
width: 132px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-133px {
width: 133px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-134px {
width: 134px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-135px {
width: 135px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-136px {
width: 136px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-137px {
width: 137px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-138px {
width: 138px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-139px {
width: 139px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-140px {
width: 140px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-141px {
width: 141px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-142px {
width: 142px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-143px {
width: 143px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-144px {
width: 144px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-145px {
width: 145px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-146px {
width: 146px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-147px {
width: 147px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-148px {
width: 148px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-149px {
width: 149px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-150px {
width: 150px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-151px {
width: 151px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-152px {
width: 152px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-153px {
width: 153px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-154px {
width: 154px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-155px {
width: 155px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-156px {
width: 156px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-157px {
width: 157px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-158px {
width: 158px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-159px {
width: 159px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-160px {
width: 160px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-161px {
width: 161px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-162px {
width: 162px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-163px {
width: 163px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-164px {
width: 164px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-165px {
width: 165px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-166px {
width: 166px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-167px {
width: 167px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-168px {
width: 168px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-169px {
width: 169px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-170px {
width: 170px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-171px {
width: 171px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-172px {
width: 172px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-173px {
width: 173px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-174px {
width: 174px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-175px {
width: 175px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-176px {
width: 176px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-177px {
width: 177px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-178px {
width: 178px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-179px {
width: 179px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-180px {
width: 180px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-181px {
width: 181px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-182px {
width: 182px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-183px {
width: 183px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-184px {
width: 184px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-185px {
width: 185px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-186px {
width: 186px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-187px {
width: 187px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-188px {
width: 188px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-189px {
width: 189px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-190px {
width: 190px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-191px {
width: 191px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-192px {
width: 192px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-193px {
width: 193px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-194px {
width: 194px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-195px {
width: 195px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-196px {
width: 196px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-197px {
width: 197px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-198px {
width: 198px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-199px {
width: 199px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-200px {
width: 200px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-201px {
width: 201px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-202px {
width: 202px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-203px {
width: 203px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-204px {
width: 204px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-205px {
width: 205px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-206px {
width: 206px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-207px {
width: 207px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-208px {
width: 208px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-209px {
width: 209px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-210px {
width: 210px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-211px {
width: 211px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-212px {
width: 212px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-213px {
width: 213px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-214px {
width: 214px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-215px {
width: 215px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-216px {
width: 216px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-217px {
width: 217px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-218px {
width: 218px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-219px {
width: 219px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-220px {
width: 220px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-221px {
width: 221px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-222px {
width: 222px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-223px {
width: 223px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-224px {
width: 224px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-225px {
width: 225px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-226px {
width: 226px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-227px {
width: 227px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-228px {
width: 228px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-229px {
width: 229px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-230px {
width: 230px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-231px {
width: 231px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-232px {
width: 232px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-233px {
width: 233px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-234px {
width: 234px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-235px {
width: 235px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-236px {
width: 236px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-237px {
width: 237px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-238px {
width: 238px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-239px {
width: 239px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-240px {
width: 240px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-241px {
width: 241px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-242px {
width: 242px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-243px {
width: 243px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-244px {
width: 244px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-245px {
width: 245px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-246px {
width: 246px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-247px {
width: 247px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-248px {
width: 248px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-249px {
width: 249px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-250px {
width: 250px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-251px {
width: 251px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-252px {
width: 252px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-253px {
width: 253px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-254px {
width: 254px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-255px {
width: 255px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-256px {
width: 256px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-257px {
width: 257px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-258px {
width: 258px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-259px {
width: 259px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-260px {
width: 260px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-261px {
width: 261px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-262px {
width: 262px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-263px {
width: 263px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-264px {
width: 264px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-265px {
width: 265px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-266px {
width: 266px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-267px {
width: 267px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-268px {
width: 268px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-269px {
width: 269px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-270px {
width: 270px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-271px {
width: 271px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-272px {
width: 272px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-273px {
width: 273px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-274px {
width: 274px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-275px {
width: 275px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-276px {
width: 276px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-277px {
width: 277px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-278px {
width: 278px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-279px {
width: 279px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-280px {
width: 280px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-281px {
width: 281px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-282px {
width: 282px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-283px {
width: 283px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-284px {
width: 284px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-285px {
width: 285px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-286px {
width: 286px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-287px {
width: 287px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-288px {
width: 288px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-289px {
width: 289px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-290px {
width: 290px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-291px {
width: 291px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-292px {
width: 292px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-293px {
width: 293px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-294px {
width: 294px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-295px {
width: 295px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-296px {
width: 296px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-297px {
width: 297px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-298px {
width: 298px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-299px {
width: 299px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-300px {
width: 300px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-301px {
width: 301px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-302px {
width: 302px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-303px {
width: 303px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-304px {
width: 304px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-305px {
width: 305px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-306px {
width: 306px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-307px {
width: 307px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-308px {
width: 308px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-309px {
width: 309px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-310px {
width: 310px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-311px {
width: 311px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-312px {
width: 312px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-313px {
width: 313px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-314px {
width: 314px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-315px {
width: 315px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-316px {
width: 316px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-317px {
width: 317px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-318px {
width: 318px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-319px {
width: 319px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-320px {
width: 320px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-321px {
width: 321px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-322px {
width: 322px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-323px {
width: 323px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-324px {
width: 324px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-325px {
width: 325px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-326px {
width: 326px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-327px {
width: 327px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-328px {
width: 328px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-329px {
width: 329px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-330px {
width: 330px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-331px {
width: 331px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-332px {
width: 332px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-333px {
width: 333px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-334px {
width: 334px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-335px {
width: 335px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-336px {
width: 336px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-337px {
width: 337px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-338px {
width: 338px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-339px {
width: 339px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-340px {
width: 340px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-341px {
width: 341px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-342px {
width: 342px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-343px {
width: 343px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-344px {
width: 344px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-345px {
width: 345px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-346px {
width: 346px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-347px {
width: 347px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-348px {
width: 348px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-349px {
width: 349px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-350px {
width: 350px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-351px {
width: 351px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-352px {
width: 352px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-353px {
width: 353px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-354px {
width: 354px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-355px {
width: 355px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-356px {
width: 356px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-357px {
width: 357px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-358px {
width: 358px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-359px {
width: 359px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-360px {
width: 360px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-361px {
width: 361px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-362px {
width: 362px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-363px {
width: 363px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-364px {
width: 364px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-365px {
width: 365px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-366px {
width: 366px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-367px {
width: 367px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-368px {
width: 368px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-369px {
width: 369px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-370px {
width: 370px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-371px {
width: 371px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-372px {
width: 372px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-373px {
width: 373px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-374px {
width: 374px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-375px {
width: 375px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-376px {
width: 376px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-377px {
width: 377px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-378px {
width: 378px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-379px {
width: 379px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-380px {
width: 380px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-381px {
width: 381px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-382px {
width: 382px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-383px {
width: 383px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-384px {
width: 384px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-385px {
width: 385px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-386px {
width: 386px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-387px {
width: 387px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-388px {
width: 388px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-389px {
width: 389px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-390px {
width: 390px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-391px {
width: 391px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-392px {
width: 392px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-393px {
width: 393px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-394px {
width: 394px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-395px {
width: 395px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-396px {
width: 396px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-397px {
width: 397px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-398px {
width: 398px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-399px {
width: 399px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-400px {
width: 400px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-401px {
width: 401px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-402px {
width: 402px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-403px {
width: 403px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-404px {
width: 404px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-405px {
width: 405px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-406px {
width: 406px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-407px {
width: 407px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-408px {
width: 408px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-409px {
width: 409px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-410px {
width: 410px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-411px {
width: 411px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-412px {
width: 412px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-413px {
width: 413px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-414px {
width: 414px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-415px {
width: 415px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-416px {
width: 416px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-417px {
width: 417px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-418px {
width: 418px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-419px {
width: 419px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-420px {
width: 420px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-421px {
width: 421px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-422px {
width: 422px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-423px {
width: 423px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-424px {
width: 424px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-425px {
width: 425px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-426px {
width: 426px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-427px {
width: 427px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-428px {
width: 428px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-429px {
width: 429px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-430px {
width: 430px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-431px {
width: 431px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-432px {
width: 432px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-433px {
width: 433px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-434px {
width: 434px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-435px {
width: 435px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-436px {
width: 436px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-437px {
width: 437px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-438px {
width: 438px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-439px {
width: 439px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-440px {
width: 440px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-441px {
width: 441px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-442px {
width: 442px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-443px {
width: 443px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-444px {
width: 444px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-445px {
width: 445px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-446px {
width: 446px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-447px {
width: 447px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-448px {
width: 448px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-449px {
width: 449px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-450px {
width: 450px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-451px {
width: 451px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-452px {
width: 452px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-453px {
width: 453px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-454px {
width: 454px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-455px {
width: 455px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-456px {
width: 456px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-457px {
width: 457px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-458px {
width: 458px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-459px {
width: 459px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-460px {
width: 460px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-461px {
width: 461px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-462px {
width: 462px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-463px {
width: 463px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-464px {
width: 464px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-465px {
width: 465px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-466px {
width: 466px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-467px {
width: 467px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-468px {
width: 468px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-469px {
width: 469px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-470px {
width: 470px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-471px {
width: 471px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-472px {
width: 472px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-473px {
width: 473px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-474px {
width: 474px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-475px {
width: 475px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-476px {
width: 476px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-477px {
width: 477px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-478px {
width: 478px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-479px {
width: 479px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-480px {
width: 480px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-481px {
width: 481px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-482px {
width: 482px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-483px {
width: 483px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-484px {
width: 484px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-485px {
width: 485px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-486px {
width: 486px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-487px {
width: 487px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-488px {
width: 488px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-489px {
width: 489px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-490px {
width: 490px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-491px {
width: 491px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-492px {
width: 492px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-493px {
width: 493px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-494px {
width: 494px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-495px {
width: 495px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-496px {
width: 496px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-497px {
width: 497px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-498px {
width: 498px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-499px {
width: 499px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hikaku-button.opt-width-500px {
width: 500px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ==================================================================
フォーム
================================================================== */
.form-select {
position: relative;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}
.form-select > select {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
border: 1px solid #0783c2;
border-radius: 4px;
padding: 10px 34px 10px 16px;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
background-color: #edf9ff;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-select ::-ms-expand {
display: none;
}
.form-select::after {
content: '';
position: absolute;
right: 18px;
top: 0;
bottom: 0;
width: 0;
height: 0;
margin: auto 0;
border-style: solid;
border-width: 0 6px 10px 6px;
border-color: transparent transparent #9c9c9c transparent;
-webkit-transform: scale(1, -1);
transform: scale(1, -1);
}
.form-select:hover > select {
border-color: #37b4f3;
}
.form-select:hover::after {
border-color: transparent transparent #37b4f3 transparent;
}
.form-radio {
font-weight: 300;
line-height: 1.5;
word-break: break-all;
}
.form-radio > label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #0783c2;
border-radius: 4px;
padding: 11px 31px 11px 15px;
background-color: #edf9ff;
cursor: pointer;
}
.form-radio > label > input[type="radio"],
.form-radio > label > input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.form-radio > label > input[type="radio"] + span,
.form-radio > label > input[type="checkbox"] + span {
display: block;
position: relative;
padding-left: 28px;
}
.form-radio > label > input[type="radio"] + span::before, .form-radio > label > input[type="radio"] + span::after,
.form-radio > label > input[type="checkbox"] + span::before,
.form-radio > label > input[type="checkbox"] + span::after {
content: '';
position: absolute;
top: -50%;
bottom: -50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: auto 0;
}
.form-radio > label > input[type="radio"] + span::before,
.form-radio > label > input[type="checkbox"] + span::before {
display: block;
left: 0;
width: 20px;
height: 20px;
}
.form-radio > label > input[type="radio"] + span::after,
.form-radio > label > input[type="checkbox"] + span::after {
display: none;
}
.form-radio > label > input[type="radio"] + span::before, .form-radio > label > input[type="radio"] + span::after {
border-radius: 50%;
}
.form-radio > label > input[type="radio"] + span::before {
border: 1px solid #b6b6b6;
background-color: #fff;
}
.form-radio > label > input[type="radio"] + span::after {
left: 5px;
width: 10px;
height: 10px;
background-color: #b6b6b6;
}
.form-radio > label > input[type="radio"]:focus + span::before {
border-color: #37b4f3;
}
.form-radio > label > input[type="radio"]:focus + span::after {
display: block;
background-color: #37b4f3;
}
.form-radio > label > input[type="radio"]:checked + span::before {
border-color: #0783c2;
background-color: #fff;
}
.form-radio > label > input[type="radio"]:checked + span::after {
display: block;
background-color: #0783c2;
}
.form-radio > label > input[type="radio"]:checked:focus + span::before {
border-color: #37b4f3;
}
.form-radio > label > input[type="radio"]:checked:focus + span::after {
background-color: #37b4f3;
}
.form-radio > label > input[type="checkbox"] + span::before {
border-radius: 4px;
border: 1px solid #b6b6b6;
background-color: #fff;
}
.form-radio > label > input[type="checkbox"] + span::after {
left: 4px;
width: 12px;
height: 10px;
background: url(/assets/img/icon/ico_checked.png) no-repeat center center/100%;
}
.form-radio > label > input[type="checkbox"]:focus + span::before {
border-color: #37b4f3;
}
.form-radio > label > input[type="checkbox"]:checked + span::before {
border-color: #0783c2;
background-color: #0783c2;
}
.form-radio > label > input[type="checkbox"]:checked + span::after {
display: block;
}
.form-radio > label > input[type="checkbox"]:checked:focus + span::before {
border-color: #37b4f3;
background-color: #37b4f3;
}
.form-radio > label:hover {
border-color: #37b4f3 !important;
}
.form-radio > label:hover > input[type="radio"] + span::before {
border-color: #37b4f3;
background-color: #fff;
}
.form-radio > label:hover > input[type="radio"] + span::after {
display: block;
background-color: #37b4f3;
}
.form-radio > label:hover > input[type="checkbox"] + span::before {
border-color: #37b4f3;
}
.form-radio > label:hover > input[type="checkbox"]:checked + span::before {
background-color: #37b4f3;
}
.form-radio-list_item .form-radio {
height: 100%;
}
.form-radio-list_item .form-radio > label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
border-radius: 0;
border-right: 0;
border-left: 0;
}
.form-radio-list_item .form-radio > label::before, .form-radio-list_item .form-radio > label::after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 0;
border-right: 1px solid #0783c2;
}
.form-radio-list_item .form-radio > label::before {
left: 0;
}
.form-radio-list_item .form-radio > label::after {
right: 0;
}
.form-radio-list_item .form-radio > label:hover {
z-index: 1;
}
.form-radio-list_item .form-radio > label:hover::before, .form-radio-list_item .form-radio > label:hover::after {
border-right-color: #37b4f3;
}
.form-radio-list_item + .form-radio-list_item .form-radio > label::before {
left: -1px;
}
.form-radio-list_item:first-child .form-radio > label {
border-radius: 4px 0 0 4px;
border-left: 1px solid #0783c2;
}
.form-radio-list_item:first-child .form-radio > label::before {
display: none;
}
.form-radio-list_item:last-child .form-radio > label {
border-radius: 0 4px 4px 0;
border-right: 1px solid #0783c2;
}
.form-radio-list_item:last-child .form-radio > label::after {
display: none;
}
.form-radio-list_item:first-child:last-child .form-radio > label {
border-radius: 4px;
border-left: 1px solid #0783c2;
border-right: 1px solid #0783c2;
}
.form-radio-list_item:first-child:last-child .form-radio > label::before, .form-radio-list_item:first-child:last-child .form-radio > label::after {
display: none;
}
.form-radio-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
@media screen and (max-width: 756px) {
.form-radio-list_item {
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
width: 100%;
}
}
.form-field {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 756px) {
.form-field {
display: block;
}
}
.form-field_item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.form-field_item + .form-field_item {
margin-left: 32px;
}
@media screen and (max-width: 756px) {
.form-field_item + .form-field_item {
margin-top: 12px;
margin-left: 0;
}
}
.form-field_label {
font-size: 14px;
font-weight: 600;
}
.form-field_label > legend {
padding: 0;
}
.form-field_item.opt-label-1em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 1em;
-ms-flex: 0 0 1em;
flex: 0 0 1em;
width: 1em;
}
.form-field_item.opt-label-2em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 2em;
-ms-flex: 0 0 2em;
flex: 0 0 2em;
width: 2em;
}
.form-field_item.opt-label-3em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 3em;
-ms-flex: 0 0 3em;
flex: 0 0 3em;
width: 3em;
}
.form-field_item.opt-label-4em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 4em;
-ms-flex: 0 0 4em;
flex: 0 0 4em;
width: 4em;
}
.form-field_item.opt-label-5em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 5em;
-ms-flex: 0 0 5em;
flex: 0 0 5em;
width: 5em;
}
.form-field_item.opt-label-6em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 6em;
-ms-flex: 0 0 6em;
flex: 0 0 6em;
width: 6em;
}
.form-field_item.opt-label-7em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 7em;
-ms-flex: 0 0 7em;
flex: 0 0 7em;
width: 7em;
}
.form-field_item.opt-label-8em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8em;
-ms-flex: 0 0 8em;
flex: 0 0 8em;
width: 8em;
}
.form-field_item.opt-label-9em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 9em;
-ms-flex: 0 0 9em;
flex: 0 0 9em;
width: 9em;
}
.form-field_item.opt-label-10em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 10em;
-ms-flex: 0 0 10em;
flex: 0 0 10em;
width: 10em;
}
.form-field_item.opt-label-11em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 11em;
-ms-flex: 0 0 11em;
flex: 0 0 11em;
width: 11em;
}
.form-field_item.opt-label-12em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 12em;
-ms-flex: 0 0 12em;
flex: 0 0 12em;
width: 12em;
}
.form-field_item.opt-label-13em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 13em;
-ms-flex: 0 0 13em;
flex: 0 0 13em;
width: 13em;
}
.form-field_item.opt-label-14em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 14em;
-ms-flex: 0 0 14em;
flex: 0 0 14em;
width: 14em;
}
.form-field_item.opt-label-15em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 15em;
-ms-flex: 0 0 15em;
flex: 0 0 15em;
width: 15em;
}
.form-field_item.opt-label-16em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16em;
-ms-flex: 0 0 16em;
flex: 0 0 16em;
width: 16em;
}
.form-field_item.opt-label-17em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 17em;
-ms-flex: 0 0 17em;
flex: 0 0 17em;
width: 17em;
}
.form-field_item.opt-label-18em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 18em;
-ms-flex: 0 0 18em;
flex: 0 0 18em;
width: 18em;
}
.form-field_item.opt-label-19em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 19em;
-ms-flex: 0 0 19em;
flex: 0 0 19em;
width: 19em;
}
.form-field_item.opt-label-20em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20em;
-ms-flex: 0 0 20em;
flex: 0 0 20em;
width: 20em;
}
.form-field_item.opt-label-21em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 21em;
-ms-flex: 0 0 21em;
flex: 0 0 21em;
width: 21em;
}
.form-field_item.opt-label-22em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 22em;
-ms-flex: 0 0 22em;
flex: 0 0 22em;
width: 22em;
}
.form-field_item.opt-label-23em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 23em;
-ms-flex: 0 0 23em;
flex: 0 0 23em;
width: 23em;
}
.form-field_item.opt-label-24em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 24em;
-ms-flex: 0 0 24em;
flex: 0 0 24em;
width: 24em;
}
.form-field_item.opt-label-25em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25em;
-ms-flex: 0 0 25em;
flex: 0 0 25em;
width: 25em;
}
.form-field_item.opt-label-26em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 26em;
-ms-flex: 0 0 26em;
flex: 0 0 26em;
width: 26em;
}
.form-field_item.opt-label-27em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 27em;
-ms-flex: 0 0 27em;
flex: 0 0 27em;
width: 27em;
}
.form-field_item.opt-label-28em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 28em;
-ms-flex: 0 0 28em;
flex: 0 0 28em;
width: 28em;
}
.form-field_item.opt-label-29em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 29em;
-ms-flex: 0 0 29em;
flex: 0 0 29em;
width: 29em;
}
.form-field_item.opt-label-30em .form-field_label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 30em;
-ms-flex: 0 0 30em;
flex: 0 0 30em;
width: 30em;
}
@media screen and (max-width: 756px) {
.form-field_item[class*="opt-label-"] .form-field_body {
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
width: 100%;
}
}
/* ==================================================================
口コミはありません
================================================================== */
.no-voice__wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 40px;
}
@media screen and (max-width: 756px) {
.no-voice__wrap {
margin-top: 32px;
}
}
.no-voice__wrap .no-voice__image {
width: 324px;
height: 324px;
}
@media screen and (max-width: 756px) {
.no-voice__wrap .no-voice__image {
width: 274px;
height: 274px;
}
}
.no-voice__wrap .no-voice__image img {
width: 100%;
}
.no-voice__wrap .no-voice__txt {
font-size: 16px;
color: #333;
margin-top: 39px;
text-align: center;
}
/* ==================================================================
楽天ポイントバナー
================================================================== */
.advertising {
width: 1008px;
margin: 43px auto 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 756px) {
.advertising {
width: 100%;
margin-top: 35px;
}
}
.advertising .advertising-anchor {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
border-radius: 4px;
text-decoration: none;
}
@media screen and (max-width: 756px) {
.advertising .advertising-anchor {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
.advertising .advertising-anchor:hover {
text-decoration: none;
}
.advertising .advertising-anchor:hover .more-btn {
background: #9c9c9c;
border: 1px solid #9c9c9c;
color: #fff;
}
.advertising .advertising-anchor .advertising-image {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media screen and (min-width: 757px) {
.advertising .advertising-anchor .advertising-image img {
width: 504px;
}
}
@media screen and (max-width: 756px) {
.advertising .advertising-anchor .advertising-image img {
width: 100%;
}
}
.advertising .advertising-anchor .advertising-txt {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 756px) {
.advertising .advertising-anchor .advertising-txt {
padding: 23px 16px 16px;
}
}
.advertising .advertising-anchor .advertising-txt .txt01 {
font-size: 16px;
color: #0783c2;
font-weight: bold;
}
.advertising .advertising-anchor .advertising-txt .txt02 {
margin-top: 6px;
font-size: 28px;
color: #333;
font-weight: bold;
}
@media screen and (max-width: 756px) {
.advertising .advertising-anchor .advertising-txt .txt02 {
font-size: 22px;
}
}
.advertising .advertising-anchor .advertising-txt .more-btn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 20px;
}
.advertising .advertising-anchor .advertising-txt .more-btn .new-window-l {
margin-left: 6px;
font-size: 16px;
}
/* ==================================================================
モジュール
================================================================== */
.strong {
font-weight: 700;
}
.tooltip {
display: inline-block;
margin: 0 4px;
vertical-align: top;
line-height: 1;
}
.tooltip:last-child {
margin-right: 0;
}
.tooltip:first-child {
margin-left: 0;
}
.tooltip > a {
display: inline-block;
vertical-align: middle;
}
.tooltip > a > i {
position: relative;
font-size: 16px;
line-height: inherit;
vertical-align: middle;
color: #848484;
top: 2px;
}
.tooltip > a > i > span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
.tooltip > a:hover > i {
color: #0783c2;
}
.badge-wrap {
position: relative;
}
.badge {
display: none;
position: absolute;
right: -5px;
top: -1px;
height: 1.5em;
width: 1.5em;
border-radius: 50%;
font-size: 1.1rem;
font-weight: 300;
line-height: 1.5;
background-color: #bf0000;
color: #fff;
text-align: center;
}
.badge-wrap.has-badge .badge {
display: block;
}
.mod-note {
position: relative;
padding-left: 1.5em;
font-size: 1.2rem;
color: #686868;
}
.mod-note:nth-child(n+2) {
margin-top: 24px;
}
.mod-note + .mod-note {
margin-top: 8px;
}
.mod-note > span:first-child {
position: absolute;
top: 0;
left: 0;
}
.mod-rankingStatus__wrap {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 8px;
}
.mod-rankingStatus__wrap .ranking-star {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.mod-rankingStatus__wrap .ranking-star span {
width: 20px;
height: 20px;
display: block;
background-image: url(/assets/img/icon/ico_star_gray.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
@media screen and (max-width: 756px) {
.mod-rankingStatus__wrap .ranking-star span {
width: 16px;
height: 16px;
}
}
.mod-rankingStatus__wrap .ranking-star span[aria-grow=true] {
background-image: url(/assets/img/icon/ico_star.png);
}
.mod-rankingStatus__wrap .ranking-rating {
font-size: 16px;
color: #f59600;
margin-left: 4px;
line-height: 1;
}
@media screen and (max-width: 756px) {
.mod-rankingStatus__wrap .ranking-rating {
font-size: 14px;
}
}
.add-icon {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
display: inline-block;
-webkit-transition: all .3s;
transition: all .3s;
}
.add-icon.icon-present {
background-image: url(/assets/img/icon/ico_present.png);
}
.add-icon.icon-point {
background-image: url(/assets/img/icon/ico_point.png);
}
.add-icon.icon-question {
background-image: url(/assets/img/icon/ico_question.png);
}
.add-icon.icon-book {
background-image: url(/assets/img/icon/ico_book.png);
}
.add-icon.icon-consult {
background-image: url(/assets/img/top/ico_pear_consult.png);
}
/* ==================================================================
tooltip用style
================================================================== */
/* -------- modal -------- */
.glModal * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.glModal {
display: none;
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
.glModal-box {
background-color: #fff;
height: 100%;
width: 100%;
}
/* -------- modal control -------- */
.glModal-controlBox {
background: url(/assets/img/glossary/glossary_bg.png) no-repeat center center;
background-size: cover;
height: 80px;
overflow: hidden;
padding: 24px;
position: relative;
}
.glModal-btnWrap {
text-align: right;
}
.glModal-btnClose {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
cursor: pointer;
line-height: 1;
outline: none;
padding: 0;
vertical-align: bottom;
}
.glModal-ttl {
font-size: 2.4rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
position: absolute;
top: 24px;
left: 0;
right: 0;
}
/* -------- modal contents -------- */
.glModal-content {
height: 100%;
}
.glModal-header {
padding-bottom: 50px;
}
.glModal-title {
color: #069;
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
font-size: 36px;
font-weight: normal;
letter-spacing: .07em;
line-height: 1.5;
margin-top: 40px;
padding-top: 38px;
position: relative;
text-align: center;
}
.glModal-title::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 134px;
height: 5px;
margin-left: -67px;
content: '';
background: #069;
}
@media screen and (min-width: 757px) {
.glModal-overLay {
background: rgba(0, 0, 0, 0.24);
height: 100vh;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.glModal-box {
background-color: #fff;
height: 80%;
left: 50%;
position: absolute;
top: 50%;
max-width: 810px;
width: 90%;
-webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* -------- modal contents -------- */
.glModal-content {
height: calc(100% - 46px);
}
.glModal-header {
padding-bottom: 50px;
}
.glModal-title {
color: #069;
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, MS-PGothic, sans-serif;
font-size: 36px;
font-weight: normal;
letter-spacing: .07em;
line-height: 1.5;
margin-top: 40px;
padding-top: 38px;
position: relative;
text-align: center;
}
.glModal-title::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 134px;
height: 5px;
margin-left: -67px;
content: '';
background: #069;
}
}
.glModal-content {
height: calc(100% - 80px);
overflow: auto;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
}
.objInclude {
border: none;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* ==================================================================
Unique style
================================================================== */
@media screen and (max-width: 756px) {
.topBankArea {
display: block !important;
}
}
.page_index .main {
width: 100%;
margin: 0 auto;
padding: 0 0 50px;
background-color: #f7f7f7;
overflow: hidden;
}
.page_index .mainVisualTop {
background-color: #74C4ED;
}
.page_index .mainVisualTop .mainVisualTop-inr {
position: relative;
width: 1072px;
height: 380px;
margin: auto;
}
.page_index .mainVisualTop .mainVisualTop-ttl {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.page_index .mainVisualTop .mainVisualTop-ttlImg {
max-width: 100%;
}
.page_index .mainVisualTop .mainVisualTop-cnt {
position: absolute;
right: 0;
top: 210px;
width: 454px;
}
.page_index .mainVisualTop .mainVisualTop-lead {
font-size: 16px;
text-align: center;
}
.page_index .mainVisualTop .mainVisualTop-btnLst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 35px;
}
.page_index .mainVisualTop .mainVisualTop-btn {
position: relative;
width: 222px;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk {
display: block;
padding: 10px 5px;
font-size: 14px;
line-height: 1.6;
text-align: center;
text-decoration: none;
color: #333;
background-color: #fff;
border-radius: 4px;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk em {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 16px;
color: #0783c2;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk em .phone-f {
font-size: 16px;
margin-right: 2px;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk em .chevron-right {
position: absolute;
right: 14px;
top: 50%;
margin-top: -8px;
font-size: 16px;
color: #333;
}
@media screen and (min-width: 757px) {
.page_index .mainVisualTop .mainVisualTop-btnLnk:focus em, .page_index .mainVisualTop .mainVisualTop-btnLnk:hover em,
.page_index .mainVisualTop .mainVisualTop-btnLnk:focus .chevron-right,
.page_index .mainVisualTop .mainVisualTop-btnLnk:hover .chevron-right {
color: #37b4f3;
}
}
.page_index .mainVisualTop .mainVisualTop-btnLnk:active em {
color: #085b7c;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk .mainVisualTop-bln {
position: absolute;
top: -31px;
left: -35px;
width: 80px;
}
.page_index .mainVisualTop .mainVisualTop-btn:nth-child(2) .mainVisualTop-btnLnk .mainVisualTop-bln {
left: -26px;
}
.page_index .visual .visual-inner-ttl {
text-align: center;
}
.page_index .visual .visual-inner-txt {
text-align: center;
font-size: 114.29%;
margin-top: 10px;
}
.page_index .visual .visual-inner {
width: 1072px;
margin: 0 auto;
}
.page_index .visual.visual-last {
margin-bottom: 80px;
}
.page_index .visual_middle {
text-align: center;
display: table;
width: 100%;
}
.page_index .visual_middle .visual-inner {
display: table-cell;
vertical-align: middle;
height: 340px;
padding: 0;
width: 1072px;
}
.page_index .visual_middle .visual_middle-ttl {
font-size: 32px;
}
.page_index .visual_middle .visual_middle-txt {
font-size: 16px;
margin-top: 15px;
}
.page_index .visual_middle .visual_middle-btn {
margin-top: 25px;
}
.page_index .visual_middle .visual_middle-btn a {
border: 1px solid #fff;
display: inline-block;
padding: .55em 1.5em;
border-radius: 4px;
color: #fff;
text-decoration: none;
}
.page_index .visual_middle .visual_middle-btn a:hover {
color: #fff;
background-color: #9c9c9c;
}
.page_index .visual_middle.visual_media {
background: url(/assets/img/bg_index_media.png) no-repeat center;
background-size: cover;
color: #fff;
}
.page_index .visual_middle.visual_insurance {
background: url(/assets/img/bg_index_insurance.png) no-repeat center right;
background-size: cover;
color: #fff;
}
.page_index.tabBox {
background: -webkit-linear-gradient(top, #fff 0%, #fff 72px, #ebebeb 72px, #ebebeb 100%);
background: linear-gradient(to bottom, #fff 0%, #fff 72px, #ebebeb 72px, #ebebeb 100%);
margin-top: 32px;
padding-bottom: 40px;
}
.page_index .tabBoxWrap {
width: 1072px;
margin: 0 auto;
overflow: hidden;
border-radius: 4px;
}
@media screen and (min-width: 757px) {
.page_index .searchRankArea {
width: 722px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 32px auto 0;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
}
@media screen and (max-width: 756px) {
.page_index .searchRankArea {
padding: 24px 0 0;
text-align: center;
}
}
.page_index .searchRankArea p {
position: relative;
background-color: #fff;
font-size: 20px;
font-weight: bold;
padding: 16px;
width: 300px;
border-radius: 32px;
text-align: center;
}
@media screen and (max-width: 756px) {
.page_index .searchRankArea p {
margin: 0 auto;
font-size: 17px;
display: inline-block;
width: inherit;
padding: 8px 32px;
}
}
.page_index .searchRankArea p:after {
content: '';
position: absolute;
background-image: url(/assets/img/top/pc/bg_comment.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 32px;
height: 17px;
bottom: 10px;
right: -20px;
}
@media screen and (max-width: 756px) {
.page_index .searchRankArea p:after {
width: 29px;
height: 14px;
bottom: -14px;
left: 0;
right: 0;
margin: 0 auto;
background-image: url(/assets/img/top/sp/bg_comment.png);
}
}
.page_index .searchRankArea a {
text-decoration: none;
padding: 24px 48px;
background-color: #0783c2;
border-radius: 4px;
}
.page_index .searchRankArea a:hover {
background-color: #37b4f3;
}
@media screen and (max-width: 756px) {
.page_index .searchRankArea a {
display: inline-block;
margin: 24px auto 0;
padding: 32px 0;
width: calc(100% - 32px);
}
}
.page_index .searchRankArea a span {
font-size: 17px;
position: relative;
padding-left: 40px;
color: #fff;
}
.page_index .searchRankArea a span .rex-icon {
position: absolute;
top: calc(50% - 16px);
left: 0;
font-size: 32px;
}
.page_index .normalTab .tabTitle {
overflow: visible;
}
.page_index .normalTab .tabTitle > ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
margin: 0;
}
.page_index .page_index .normalTab .tabTitle > ul {
margin-bottom: 0;
}
.page_index .normalTab .tabTitle > ul > li {
display: block;
position: relative;
width: 100%;
height: auto;
padding: 24px 0;
font-size: 22px;
font-weight: 700;
line-height: 1;
color: #9c9c9c;
border: none;
border-radius: 0;
background-color: #ececec;
-webkit-transition: all 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: all 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .normalTab .tabTitle > ul > li .tabBtn-iconSelect {
position: relative;
padding-left: 48px;
}
.page_index .normalTab .tabTitle > ul > li .tabBtn-iconSelect:before {
content: '';
position: absolute;
background-image: url(/assets/img/icon/ico_select_off.png);
background-position: center;
background-size: cover;
display: inline-block;
background-repeat: no-repeat;
width: 40px;
height: 40px;
top: calc(50% - 20px);
left: 0;
-webkit-transition: all 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: all 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .normalTab .tabTitle > ul > li .tabBtn-iconContract {
position: relative;
padding-left: 48px;
}
.page_index .normalTab .tabTitle > ul > li .tabBtn-iconContract:before {
content: '';
position: absolute;
background-image: url(/assets/img/icon/ico_contract_off.png);
background-position: center;
background-size: cover;
display: inline-block;
background-repeat: no-repeat;
width: 40px;
height: 40px;
top: calc(50% - 20px);
left: 0;
-webkit-transition: all 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: all 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
@media screen and (min-width: 757px) {
.page_index .normalTab .tabTitle > ul > li:hover, .page_index .normalTab .tabTitle > ul > li:focus {
color: #fff;
background-color: #37b4f3;
}
.page_index .normalTab .tabTitle > ul > li:hover .tabBtn-iconSelect:before, .page_index .normalTab .tabTitle > ul > li:focus .tabBtn-iconSelect:before {
background-image: url(/assets/img/icon/ico_select_on.png);
}
.page_index .normalTab .tabTitle > ul > li:hover .tabBtn-iconContract:before, .page_index .normalTab .tabTitle > ul > li:focus .tabBtn-iconContract:before {
background-image: url(/assets/img/icon/ico_contract_on.png);
}
}
.page_index .normalTab .tabTitle > ul > li.cur {
position: relative;
color: #fff;
background-color: #0783c2;
}
.page_index .normalTab .tabTitle > ul > li.cur:after {
content: "";
position: absolute;
top: 99%;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 9px 0 9px;
border-color: #0783c2 transparent transparent transparent;
}
.page_index .normalTab .tabTitle > ul > li.cur .tabBtn-iconSelect:before {
background-image: url(/assets/img/icon/ico_select_on.png);
}
.page_index .normalTab .tabTitle > ul > li.cur .tabBtn-iconContract:before {
background-image: url(/assets/img/icon/ico_contract_on.png);
}
.page_index .normalTab .tabContents {
-webkit-box-shadow: none;
box-shadow: none;
}
.page_index .tabContentsList {
padding: 32px 0 40px;
background-color: #fff;
}
.page_index .tabContentsList:last-child {
padding: 31px 0 0;
background-color: #f7f7f7;
}
@media screen and (max-width: 756px) {
.page_index .tabContentsList:last-child {
padding: 0;
}
}
.page_index .categoryIndex-inr {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.page_index .categoryIndex-col {
width: 20%;
padding: 12px 9px 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page_index .categoryIndex-col:not(:first-child) {
border-left: 1px solid #d1d1d1;
}
.page_index .categoryIndex-cpn {
position: relative;
margin-bottom: 48px;
padding-top: 64px;
font-size: 22px;
font-weight: bold;
text-align: center;
color: #0783c2;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: 60px auto;
}
@media screen and (max-width: 756px) {
.page_index .categoryIndex-cpn {
margin-bottom: 0;
}
}
.page_index .categoryIndex-cpn .lstToggle-descTermSwitchIcon {
position: absolute;
top: calc(50% - 12px);
right: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #b6b6b6;
text-align: center;
}
.page_index .categoryIndex-cpn .lstToggle-descTermSwitchIcon .rex-icon {
font: normal 13px rex-icon;
}
.page_index .categoryIndex-cpn .lstToggle-descTermSwitchIcon .rex-icon:before {
font-size: 13px;
color: #fff;
line-height: 25px;
display: block;
}
.page_index .categoryIndex-cpn[aria-selected="true"] .lstToggle-descTermSwitchIcon {
background-color: #0783c2;
}
.page_index .categoryIndex-cpn[aria-selected="true"] .lstToggle-descTermSwitchIcon .rex-icon {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
@media screen and (min-width: 757px) {
.page_index .categoryIndex-lst {
display: block !important;
height: auto !important;
}
}
@media screen and (max-width: 756px) {
.page_index .categoryIndex-lst {
display: none;
padding-top: 8px;
}
}
@media screen and (max-width: 756px) {
.page_index .categoryIndex-lst .categoryIndex-lstItem {
border-bottom: 1px solid #ebebeb;
}
.page_index .categoryIndex-lst .categoryIndex-lstItem:last-child {
border: none;
}
}
.page_index .categoryIndex-lst .categoryIndex-lstItemLnk {
padding: 8px 0;
}
@media screen and (max-width: 756px) {
.page_index .categoryIndex-lst .categoryIndex-lstItemLnk {
font-size: 14px;
}
}
.page_index .categoryIndex-col:nth-child(1) .categoryIndex-cpn {
background-image: url(/assets/img/icon/ico_health.png);
}
.page_index .categoryIndex-col:nth-child(2) .categoryIndex-cpn {
background-image: url(/assets/img/icon/ico_family.png);
}
.page_index .categoryIndex-col:nth-child(3) .categoryIndex-cpn {
background-image: url(/assets/img/icon/ico_house.png);
}
.page_index .categoryIndex-col:nth-child(4) .categoryIndex-cpn {
background-image: url(/assets/img/icon/ico_car.png);
}
.page_index .categoryIndex-col:nth-child(5) .categoryIndex-cpn {
background-image: url(/assets/img/icon/ico_plane.png);
}
.page_index .categoryIndex-lstItemLnk {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 0;
font-size: 17px;
font-weight: 400;
color: #333;
text-decoration: none;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .categoryIndex-lstItemLnk span.parent-txt {
font-size: 17px;
}
@media screen and (max-width: 756px) {
.page_index .categoryIndex-lstItemLnk span.parent-txt {
font-size: 14px;
}
}
.page_index .categoryIndex-lstItemLnk span.parent-txt span {
font-size: 12px;
margin-left: 8px;
}
@media screen and (max-width: 756px) {
.page_index .categoryIndex-lstItemLnk span.parent-txt span {
font-size: 10px;
}
}
.page_index .categoryIndex-lstItemLnk:focus, .page_index .categoryIndex-lstItemLnk:hover {
color: #37b4f3;
text-decoration: none;
}
.page_index .categoryIndex-lstItemLnk:active {
color: #085b7c;
}
.page_index .categoryIndex-lstItemLnk .rex-icon {
font-size: 16px;
line-height: inherit;
margin-left: 8px;
}
.page_index .categoryIndex-more {
margin-top: 12px;
text-align: right;
}
.page_index .assistBnr {
margin-top: 32px;
}
.page_index .assistBnr-inr {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.page_index .assistBnr-item {
height: 100%;
}
.page_index .assistBnr-itemLnk {
position: relative;
display: block;
width: 320px;
height: 282px;
overflow: hidden;
border-radius: 4px;
}
.page_index .assistBnr-descLst {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
text-align: center;
color: #4d4d4d;
}
.page_index .assistBnr-descLstTerm {
padding-top: 30px;
}
.page_index .assistBnr-descLstTermSub {
display: block;
font-size: 16px;
font-weight: 700;
color: #0783c2;
}
.page_index .assistBnr-descLstTermMain {
display: block;
font-size: 30px;
font-weight: 700;
}
.page_index .assistBnr-descLstTermMain_event {
font-size: 25px;
letter-spacing: -0.1em;
line-height: 2;
}
.page_index .assistBnr-btn {
display: inline-block;
margin-top: 7px;
padding: 8px 23px;
font-size: 18px;
text-decoration: none;
text-align: center;
vertical-align: baseline;
color: #4d4d4d;
background-color: transparent;
border: 1px solid #4d4d4d;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .assistBnr-img {
width: 100%;
height: auto;
vertical-align: bottom;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: transform 0.2s cubic-bezier(0.25, 0, 0.45, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .assistBnr-itemLnk:hover .assistBnr-btn, .page_index .assistBnr-itemLnk:focus .assistBnr-btn {
color: #fff;
background-color: #9c9c9c;
border: 1px solid #9c9c9c;
}
.page_index .assistBnr-itemLnk:hover .assistBnr-img, .page_index .assistBnr-itemLnk:focus .assistBnr-img {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.page_index .assistBnr-itemLnk:active .assistBnr-btn {
color: #fff;
background-color: #333;
border: 1px solid #333;
}
.page_index .assistBnr-itemLnk:active .assistBnr-img {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.page_index .contactCatalog {
margin-top: 25px;
}
.page_index .contactCatalog-inr {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 20px 25px;
border: 1px solid #d1d1d1;
border-radius: 4px;
}
.page_index .contactCatalog-col {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 458px;
}
.page_index .contactCatalog-body {
-webkit-box-flex: 1;
-webkit-flex: 1 0 0%;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}
.page_index .contactCatalog-ttl {
margin-bottom: 10px;
font-size: 18px;
font-weight: 600;
}
.page_index .contactCatalog-txt {
font-size: 14px;
}
.page_index .contactCatalog-btn {
margin-top: 10px;
}
.page_index .contactCatalog-btnLnk {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 6px 33px;
text-align: center;
text-decoration: none;
color: #0783c2;
border: 1px solid #0783c2;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 757px) {
.page_index .contactCatalog-btnLnk:hover, .page_index .contactCatalog-btnLnk:focus {
color: #fff;
background-color: #37b4f3;
border: 1px solid #37b4f3;
}
}
.page_index .contactCatalog-btnLnk:active {
color: #fff;
background-color: #0783c2;
border: 1px solid #0783c2;
}
.page_index .contactCatalog-btnLnk .rex-icon {
margin-right: 8px;
font-size: 16px;
}
@media screen and (min-width: 757px) {
.page_index .contactCatalog-btnLnk_sp {
display: none;
}
}
.page_index .contactCatalog-time {
margin-top: 10px;
margin-right: -25px;
font-size: 12px;
color: #686868;
}
.page_index .contactCatalog-fig {
width: 112px;
margin-top: 25px;
margin-right: 26px;
}
.page_index .contactCatalog-img {
max-width: 100%;
}
.page_index .contractorMenu-inr {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.page_index .contractorMenu-col {
width: 267px;
}
.page_index .contractorMenu-ttl {
min-height: 40px;
margin-bottom: 25px;
padding: 3px 0;
padding-left: 65px;
font-size: 20px;
font-weight: 600;
background-position: 0 50%;
background-repeat: no-repeat;
background-size: auto 40px;
}
.page_index .contractorMenu-col:nth-child(1) .contractorMenu-ttl {
background-image: url(/assets/img/icon_top_uketsuke.png);
}
.page_index .contractorMenu-col:nth-child(2) .contractorMenu-ttl {
background-image: url(/assets/img/icon_top_change.png);
}
.page_index .contractorMenu-col:nth-child(3) .contractorMenu-ttl {
background-image: url(/assets/img/icon_top_mypage.png);
}
.page_index .contractorMenu-txt {
font-size: 14px;
}
.page_index .contractorMenu-btn {
margin-top: 10px;
}
.page_index .contractorMenu-btnLnk {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 6px 33px;
text-align: center;
text-decoration: none;
color: #0783c2;
border: 1px solid #0783c2;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 757px) {
.page_index .contractorMenu-btnLnk:hover, .page_index .contractorMenu-btnLnk:focus {
color: #fff;
background-color: #37b4f3;
border: 1px solid #37b4f3;
}
}
.page_index .contractorMenu-btnLnk:active {
color: #fff;
background-color: #0783c2;
border: 1px solid #0783c2;
}
.page_index .contractorMenu-btnLnk .rex-icon {
margin-right: 8px;
font-size: 16px;
}
.page_index .contractorMenu-time {
margin-top: 10px;
font-size: 12px;
line-height: 1.4;
color: #686868;
}
.page_index .contractorMenu-time th {
text-align: left;
font-weight: normal;
}
.page_index .groupCompany {
margin-top: 50px;
}
.page_index .groupCompany-lst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.page_index .groupCompany-lst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.page_index .groupCompany-btn {
margin: 0 28px;
}
.page_index .info {
width: 1072px;
margin: 0 auto;
padding: 50px 0;
}
.page_index .info .List:hover {
background-color: transparent;
}
.page_index .attention_wrap {
margin-top: 40px;
background-color: #fff0f0;
border: 1px solid #ffcfcf;
border-radius: 4px;
}
@media screen and (max-width: 756px) {
.page_index .attention_wrap {
margin-top: 24px;
}
}
.page_index .attention_wrap a.aleart_danger {
text-decoration: none;
}
.page_index .attention_wrap a.aleart_danger:focus, .page_index .attention_wrap a.aleart_danger:hover {
text-decoration: none;
}
.page_index .link_notice a {
text-decoration: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 9px 16px 10px;
font-size: 16px;
line-height: 24px;
color: #df0101;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .link_notice a .rex-icon {
font-size: 24px;
}
.page_index .link_notice a .sign-warning-l {
margin-right: 24px;
}
.page_index .link_notice a .chevron-right {
margin-left: auto;
}
.page_index .link_notice a:focus, .page_index .link_notice a:hover {
color: #ff1212;
text-decoration: none;
outline: none;
}
.page_index .link_notice a:active {
color: #960000;
}
.page_index .pdf_link {
text-align: center;
}
.page_index .pdf_link a {
background: url(/assets/img/icon_pdf_black.png) no-repeat right;
color: #000;
display: inline;
padding-right: 20px;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .pdf_link a:focus, .page_index .pdf_link a:hover {
color: #ff1212;
text-decoration: none;
}
.page_index .pdf_link a:active {
color: #960000;
}
@media screen and (max-width: 756px) {
.page_index .main.notice {
width: auto;
padding: 0;
overflow: hidden;
}
.page_index .main.notice img {
max-width: 100%;
}
.page_index .mainVisualTop .mainVisualTop-inr {
width: auto;
height: auto;
}
.page_index .mainVisualTop .mainVisualTop-ttl {
position: static;
}
.page_index .mainVisualTop .mainVisualTop-ttlImg {
width: 100%;
}
.page_index .mainVisualTop .mainVisualTop-cnt {
position: static;
right: auto;
width: auto;
padding: 8px 15px 13px;
}
.page_index .mainVisualTop .mainVisualTop-lead {
font-size: 3.73vw;
text-align: left;
}
.page_index .mainVisualTop .mainVisualTop-btnLst {
margin-top: 6.93vw;
}
.page_index .mainVisualTop .mainVisualTop-btn {
width: 49%;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk {
padding: 3.73vw 1.33vw;
font-size: 3.73vw;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk em {
font-size: 3.73vw;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk em .phone-f {
font-size: 3.46vw;
margin-right: 0.53vw;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk em .chevron-right {
right: 0.53vw;
top: 50%;
margin-top: -2.13vw;
font-size: 4.26vw;
}
.page_index .mainVisualTop .mainVisualTop-btnLnk .mainVisualTop-bln {
position: absolute;
top: -6.13vw;
left: -2.93vw;
width: 18.56vw;
}
.page_index .mainVisualTop .mainVisualTop-btn:nth-child(2) .mainVisualTop-btnLnk .mainVisualTop-bln {
left: -8.26vw;
}
.page_index .visual_middle {
padding: 0;
}
.page_index .visual_middle .visual-inner {
background: none;
width: 100%;
color: #fff;
height: 225px;
}
.page_index .visual_middle .visual_middle-ttl {
font-size: 28px;
}
.page_index .visual_middle .visual_middle-txt {
margin-top: 10px;
}
.page_index .visual_middle .visual_middle-btn {
margin-top: 20px;
}
.page_index .visual.visual-last {
margin-bottom: 20px;
}
.page_index .tabBoxWrap {
width: auto;
margin-bottom: 0;
border-radius: 0;
}
.page_index .tabTitle {
width: auto;
}
.page_index .normalTab .tabTitle > ul > li {
padding: 48px 0 12px;
font-size: 16px;
}
.page_index .normalTab .tabTitle > ul > li .tabBtn-iconSelect {
padding-left: 0;
}
.page_index .normalTab .tabTitle > ul > li .tabBtn-iconSelect:before {
width: 28px;
height: 28px;
top: -36px;
left: calc(50% - 14px);
}
.page_index .normalTab .tabTitle > ul > li .tabBtn-iconContract {
padding-left: 0;
}
.page_index .normalTab .tabTitle > ul > li .tabBtn-iconContract:before {
width: 28px;
height: 28px;
top: -36px;
left: calc(50% - 14px);
}
.page_index .normalTab .tabTitle > ul {
margin-bottom: 0;
background-color: #ffffff;
}
.page_index .tabContentsList {
padding: 0;
}
.page_index .categoryIndex-inr {
display: block;
}
.page_index .categoryIndex-col {
position: relative;
width: 100%;
padding: 16px;
}
.page_index .categoryIndex-col:not(:first-child) {
border-left: none;
}
.page_index .categoryIndex-col:nth-child(n+3) {
border-top: 2px solid #f7f7f7;
}
}
@media screen and (max-width: 756px) and (max-width: 756px) {
.page_index .categoryIndex-col:nth-child(n+2) {
border-top: 2px solid #f7f7f7;
}
.page_index .categoryIndex-col:last-child {
border-bottom: 2px solid #f7f7f7;
}
}
@media screen and (max-width: 756px) {
.page_index .categoryIndex-cpn {
text-align: left;
margin-bottom: 15px;
padding: 0 0 0 65px;
font-size: 16px;
background-size: 40px auto;
background-image: none;
background-position: 0 0;
}
}
@media screen and (max-width: 756px) and (max-width: 756px) {
.page_index .categoryIndex-cpn {
margin-bottom: 0;
}
}
@media screen and (max-width: 756px) {
.page_index .categoryIndex-cpn[aria-selected="true"]:after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: -16px;
background-color: #0783c2;
}
.page_index .categoryIndex-cpnSub {
font-size: 13px;
color: #686868;
font-weight: normal;
}
.page_index .categoryIndex-more {
margin-top: 0;
padding: 10px 20px;
background-color: #f7f7f7;
}
.page_index .assistBnr {
margin-top: 20px;
}
.page_index .assistBnr-inr {
display: block;
}
.page_index .assistBnr-item:not(:first-child) {
margin-top: 8px;
}
.page_index .assistBnr-itemLnk {
width: auto;
height: auto;
border-radius: 0;
}
.page_index .assistBnr-descLstTerm {
padding-top: 30px;
}
.page_index .assistBnr-descLstTerm_event {
padding-top: 18px;
}
.page_index .assistBnr-descLstTermSub {
font-size: 14px;
}
.page_index .assistBnr-descLstTermMain {
font-size: 26px;
}
.page_index .assistBnr-descLstTermMain_event {
line-height: 1.7;
}
.page_index .assistBnr-btn {
margin-top: 12px;
padding: 6px 19px;
font-size: 16px;
}
.page_index .assistBnr-img {
width: 100%;
height: auto;
vertical-align: bottom;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: transform 0.2s cubic-bezier(0.25, 0, 0.45, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .contactCatalog {
margin: 20px 15px 0;
}
.page_index .contactCatalog-inr {
padding: 0;
}
.page_index .contactCatalog-col {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
position: relative;
width: 50%;
padding: 10px 5px;
}
.page_index .contactCatalog-col:last-child {
border-left: 1px solid #d1d1d1;
}
.page_index .contactCatalog-body {
margin-top: 5px;
}
.page_index .contactCatalog-ttl {
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
text-align: center;
color: #0783c2;
}
.page_index .contactCatalog-txt {
display: none;
}
.page_index .contactCatalog-btn {
margin-top: 0;
}
.page_index .contactCatalog-btnLnk {
display: none;
}
.page_index .contactCatalog-btnLnk_sp {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 0;
border: none;
border-radius: 0;
text-indent: -10000px;
}
.page_index .contactCatalog-time {
display: none;
}
.page_index .contactCatalog-fig {
width: 72px;
margin-top: 0;
margin-right: 0;
}
.page_index .contractorMenu-inr {
display: block;
}
.page_index .contractorMenu-col {
width: auto;
padding: 15px;
padding-left: 89px;
background-position: 27px 20px;
background-repeat: no-repeat;
background-size: auto 40px;
}
.page_index .contractorMenu-col:not(:first-child) {
border-top: 2px solid #f7f7f7;
}
.page_index .contractorMenu-col:nth-child(1) {
background-image: url(/assets/img/icon_top_uketsuke.png);
}
.page_index .contractorMenu-col:nth-child(2) {
background-image: url(/assets/img/icon_top_change.png);
}
.page_index .contractorMenu-col:nth-child(3) {
background-image: url(/assets/img/icon_top_mypage.png);
}
.page_index .contractorMenu-ttl {
min-height: auto;
margin-bottom: 8px;
padding: 0;
font-size: 16px;
}
.page_index .contractorMenu-col:nth-child(1) .contractorMenu-ttl,
.page_index .contractorMenu-col:nth-child(2) .contractorMenu-ttl,
.page_index .contractorMenu-col:nth-child(3) .contractorMenu-ttl {
background-image: none;
}
.page_index .contractorMenu-btn {
margin-top: 8px;
}
.page_index .contractorMenu-btnLnk {
display: block;
}
.page_index .contractorMenu-time {
margin-top: 8px;
}
.page_index .groupCompany {
margin-top: 0;
padding: 20px 10px 25px;
border-top: 8px solid #fff;
}
.page_index .groupCompany-lst {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.page_index .groupCompany-btn {
margin: 0 1.2%;
}
.page_index .info {
width: auto;
padding: 40px 15px 20px;
overflow: hidden;
}
.page_index .info .List {
padding-right: 0;
}
.page_index .attention_wrap {
padding: 0;
}
.page_index .link_notice {
margin-bottom: 0;
font-size: 14px;
text-align: left;
}
.page_index .link_notice a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.page_index .link_notice a:hover {
color: #bf0000;
}
.page_index .link_notice a > .rex-icon {
padding-top: 4px;
}
.page_index .pdf_link {
font-size: 13px;
text-align: center;
}
.page_index .pdf_link a:focus, .page_index .pdf_link a:hover {
color: #000;
}
}
@media screen and (max-width: 320px) {
.page_index .visual.visual_index .visual-inner-ttl img {
width: 320px;
}
.page_index .visual_middle .visual_middle-ttl {
font-size: 24px;
}
.page_index .visual.visual-last {
margin-bottom: 20px;
}
.page_index .Ttl.Ttl_large {
font-size: 22px;
}
}
.info_link_area {
width: 1072px;
margin: 0 auto 20px;
}
.page_index .info_link a .chevron-right {
margin-left: auto;
}
.page_index .info_link a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 9px 16px 10px;
font-size: 16px;
line-height: 24px;
color: #006497;
-webkit-transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.page_index .info_link a .sign-info-l {
margin-right: 24px;
}
.page_index .info_link_wrap {
margin-top: 0;
color: #006497;
background-color: #ebf7fe;
border: 1px solid #c1e6fa;
border-radius: 4px;
}
.page_index .info_link a:focus, .page_index .info_link a:hover {
color: #008CD4;
text-decoration: none;
outline: 0;
}
.page_index .info_link a:active {
color: #00496E;
text-decoration: none;
outline: 0;
}
@media screen and (max-width: 756px) {
.info_link_area {
width: auto;
background-color: #fff;
padding: 24px 15px 20px;
margin: 0 auto;
}
.alert .rex-icon {
margin-top: -12px;
}
.alert_info a {
padding: 11.5px 40px 11.5px 64px;
}
}
.mainVisualTop {
width: 100%;
min-width: 100%;
background-color: #74c4ed;
}
.mainVisualTop .mainVisualTop_inner {
margin: 0 auto;
max-width: 1072px;
}
.mainVisualTop .mainVisualTop_inner img {
width: 100%;
height: auto;
}
.alert_info {
width: 1072px;
margin: 32px auto;
padding: 16px;
line-height: 1.7;
cursor: pointer;
}
.alert_info:hover, .alert_info:focus {
text-decoration: none;
color: #37b4f3;
}
@media screen and (max-width: 756px) {
.alert_info {
width: calc(100% - 32px);
}
.alert_info .rex-icon {
position: relative;
left: 0;
}
}
.linkIndex {
padding: 0 32px;
}
@media screen and (max-width: 756px) {
.linkIndex {
padding: 24px 0 0;
}
}
@media screen and (min-width: 757px) {
.linkIndex-topWrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.linkIndex-top {
position: relative;
background-color: #fff;
text-decoration: none;
-webkit-box-shadow: 0 3px 3px 1px #cecece;
box-shadow: 0 3px 3px 1px #cecece;
border-radius: 4px;
}
@media screen and (min-width: 757px) {
.linkIndex-top {
width: calc(50% - 12px);
}
}
@media screen and (max-width: 756px) {
.linkIndex-top {
-webkit-box-shadow: none;
box-shadow: none;
display: block;
}
}
.linkIndex-top .linkIndex-top_imgWrap {
width: 100%;
border-radius: 4px;
overflow: hidden;
}
.linkIndex-top .linkIndex-top_imgWrap img {
width: 100%;
height: auto;
}
.linkIndex-top .linkIndex-top_textWrap {
width: 100%;
text-decoration: none;
text-align: center;
}
@media screen and (min-width: 757px) {
.linkIndex-top .linkIndex-top_textWrap {
position: absolute;
top: 0;
left: 0;
}
}
@media screen and (max-width: 756px) {
.linkIndex-top .linkIndex-top_textWrap {
width: 100%;
padding-bottom: 40px;
}
}
.linkIndex-top .linkIndex-top_textWrap .linkIndex-top_textSub {
text-decoration: none;
color: #0783c2;
font-size: 17px;
font-weight: bold;
margin-top: 40px;
}
@media screen and (max-width: 756px) {
.linkIndex-top .linkIndex-top_textWrap .linkIndex-top_textSub {
margin-top: 0;
font-size: 17px;
padding-top: 40px;
}
}
.linkIndex-top .linkIndex-top_textWrap .linkIndex-top_textTtl {
text-decoration: none;
color: #333;
font-size: 28px;
font-weight: bold;
}
@media screen and (max-width: 756px) {
.linkIndex-top .linkIndex-top_textWrap .linkIndex-top_textTtl {
margin-top: 8px;
font-size: 26px;
}
}
.linkIndex-top .linkIndex-top_textWrap .linkIndex-top_textBtn {
display: inline-block;
margin-top: 16px;
padding: 8px 24px;
font-size: 16px;
text-decoration: none;
text-align: center;
vertical-align: baseline;
color: #4d4d4d;
background-color: transparent;
border: 1px solid #4d4d4d;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
transition: background-color 0.2s cubic-bezier(0.25, 0, 0.45, 1), color 0.2s cubic-bezier(0.25, 0, 0.45, 1);
}
.linkIndex-top .linkIndex-top_textWrap .linkIndex-top_textBtn .rex-icon {
margin-left: 8px;
font: normal 16px rex-icon;
}
.linkIndex-top .linkIndex-top_textWrap .linkIndex-top_textBtn .rex-icon:before {
font-size: 16px;
}
@media screen and (max-width: 756px) {
.linkIndex-top .linkIndex-top_textWrap .linkIndex-top_textBtn {
margin-top: 16px;
font-size: 16px;
}
}
.linkIndex-top:hover {
text-decoration: none;
}
.linkIndex-top:hover .linkIndex-top_textBtn {
background-color: #4d4d4d;
border-color: #4d4d4d;
color: #fff;
}
.linkIndex-top:hover .linkIndex-top_textBtn .rex-icon:before {
color: #fff;
}
@media screen and (max-width: 756px) {
.linkIndex-top {
background-image: url(/assets/img/top/sp/img_simulator_sp.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}
@media screen and (max-width: 756px) {
.linkIndex-top:nth-child(2) {
margin-top: 16px;
background-image: url(/assets/img/top/sp/img_if_sp.jpg);
}
}
.lifestageGuideArea {
background-color: #fff;
margin-top: 24px;
padding: 32px 32px 40px;
}
@media screen and (max-width: 756px) {
.lifestageGuideArea {
padding: 32px 0 32px;
}
}
.lifestageGuideArea h3 {
margin-top: 0;
font-size: 30px;
text-align: center;
}
@media screen and (max-width: 756px) {
.lifestageGuideArea h3 {
font-size: 22px;
}
}
.lifestageGuideArea h3 span {
position: relative;
padding-left: 56px;
display: inline-block;
}
@media screen and (max-width: 756px) {
.lifestageGuideArea h3 span {
padding-left: 40px;
}
}
.lifestageGuideArea h3 span:before {
content: '';
position: absolute;
top: calc(50% - 20px);
left: 0;
background-image: url(/assets/img/top/ico_lifestage.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 40px;
height: 40px;
}
@media screen and (max-width: 756px) {
.lifestageGuideArea h3 span:before {
top: calc(25% - 16px);
width: 32px;
height: 32px;
}
}
.lifestageGuideArea .lifestageGuide-linkWrap {
margin-top: 24px;
}
.lifestageGuideArea .lifestageGuide-linkWrap_inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media screen and (max-width: 756px) {
.lifestageGuideArea .lifestageGuide-linkWrap_inner {
margin-left: 16px;
overflow-y: scroll;
}
}
.lifestageGuideArea .lifestageGuide-linkWrap_inner .lifestageGuide-linkItem {
background-color: #fff;
-webkit-box-shadow: 0 3px 3px 1px #cecece;
box-shadow: 0 3px 3px 1px #cecece;
border-radius: 4px;
display: block;
text-decoration: none;
width: calc(25% - (16px * 3 / 4));
padding-bottom: 24px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 756px) {
.lifestageGuideArea .lifestageGuide-linkWrap_inner .lifestageGuide-linkItem {
min-width: 240px;
width: 64vw;
margin: 0 16px 4px 0;
}
}
.lifestageGuideArea .lifestageGuide-linkWrap_inner .lifestageGuide-linkItem img {
width: 100%;
height: auto;
}
.lifestageGuideArea .lifestageGuide-linkWrap_inner .lifestageGuide-linkItem p {
padding: 0 16px;
}
.lifestageGuideArea .lifestageGuide-linkWrap_inner .lifestageGuide-linkItem .lifestageGuide-linkItem_ttl {
margin-top: 16px;
color: #0783c2;
font-size: 20px;
text-align: center;
font-weight: bold;
}
.lifestageGuideArea .lifestageGuide-linkWrap_inner .lifestageGuide-linkItem .lifestageGuide-linkItem_ttl span {
display: block;
font-size: 16px;
font-weight: normal;
}
.lifestageGuideArea .lifestageGuide-linkWrap_inner .lifestageGuide-linkItem .lifestageGuide-linkItem_txt {
margin-top: 16px;
color: #686868;
font-size: 13px;
}
.lifestageGuideArea .lifestageGuide-linkWrap_inner .lifestageGuide-linkItem:hover .lifestageGuide-linkItem_ttl {
color: #37b4f3;
}
.linkIndex-guidWrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 24px;
}
@media screen and (max-width: 756px) {
.linkIndex-guidWrap {
padding: 0 16px;
}
}
.linkIndex-guidWrap .linkIndex-guidItem {
background-color: #fff;
-webkit-box-shadow: 0px 3px 3px 1px #cecece;
box-shadow: 0px 3px 3px 1px #cecece;
width: calc(50% - 24px / 2);
text-align: center;
border-radius: 4px;
}
@media screen and (max-width: 756px) {
.linkIndex-guidWrap .linkIndex-guidItem {
width: calc(50% - 12px / 2);
}
}
.linkIndex-guidWrap .linkIndex-guidItem .rex-icon {
margin-top: 24px;
}
@media screen and (max-width: 756px) {
.linkIndex-guidWrap .linkIndex-guidItem .rex-icon {
margin-top: 16px;
}
}
.linkIndex-guidWrap .linkIndex-guidItem .rex-icon:before {
font-size: 40px;
color: #0783c2;
}
@media screen and (max-width: 756px) {
.linkIndex-guidWrap .linkIndex-guidItem .rex-icon:before {
font-size: 36px;
}
}
.linkIndex-guidWrap .linkIndex-guidItem .linkIndex-guideItem_ttlSub {
font-size: 15px;
color: #333;
}
@media screen and (max-width: 756px) {
.linkIndex-guidWrap .linkIndex-guidItem .linkIndex-guideItem_ttlSub {
font-size: 12px;
margin-top: 8px;
}
}
.linkIndex-guidWrap .linkIndex-guidItem .linkIndex-guideItem_ttl {
color: #0783c2;
font-size: 23px;
font-weight: bold;
margin-bottom: 24px;
}
@media screen and (max-width: 756px) {
.linkIndex-guidWrap .linkIndex-guidItem .linkIndex-guideItem_ttl {
font-size: 18px;
margin-bottom: 16px;
}
}
.linkIndex-guidWrap .linkIndex-guidItem .thinking-icon {
background-image: url(/assets/img/top/ico_thinking.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
margin-top: 24px;
width: 40px;
height: 40px;
}
@media screen and (max-width: 756px) {
.linkIndex-guidWrap .linkIndex-guidItem .thinking-icon {
margin-top: 16px;
width: 36px;
height: 36px;
}
}
.linkIndex-guidWrap .linkIndex-guidItem:hover {
text-decoration: none;
}
.linkIndex-guidWrap .linkIndex-guidItem:hover .linkIndex-guideItem_ttlSub {
color: #37b4f3;
}
.linkIndex-guidWrap .linkIndex-guidItem:hover .linkIndex-guideItem_ttl {
color: #37b4f3;
}
.linkIndex-guidWrap .linkIndex-guidItem:hover .rex-icon:before {
color: #37b4f3;
}
.linkIndex-guidWrap .linkIndex-guidItem:hover .thinking-icon {
background-image: url(/assets/img/top/ico_thinking_on.png);
}
.linkBlank-btn {
margin-top: 24px;
text-align: center;
}
.linkBlank-btn a {
background-color: #f7f7f7;
}
.linkBlank-btn .rex-icon {
margin-left: 8px;
font: normal 16px rex-icon;
}
.linkBlank-btn .rex-icon:before {
font-size: 16px;
}
.topCampaignArea {
padding-top: 72px;
}
@media screen and (max-width: 756px) {
.topCampaignArea {
padding-top: 40px;
}
}
.topCampaignArea .articleTtl {
font-weight: bold;
font-size: 34px;
text-align: center;
}
@media screen and (max-width: 756px) {
.topCampaignArea .articleTtl {
font-size: 22px;
}
}
.topCampaignArea .articleTtl span {
position: relative;
padding-left: 56px;
}
@media screen and (max-width: 756px) {
.topCampaignArea .articleTtl span {
padding-left: 40px;
}
}
.topCampaignArea .articleTtl span .campaign-icon {
position: absolute;
top: calc(50% - 20px);
left: 0;
background-image: url(/assets/img/icon/ico_campaign.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 40px;
height: 40px;
display: inline-block;
}
@media screen and (max-width: 756px) {
.topCampaignArea .articleTtl span .campaign-icon {
width: 32px;
height: 32px;
top: calc(50% - 16px);
}
}
.topCampaignArea .topCampaignCarousel {
margin-top: 32px;
padding-bottom: 32px;
width: 950px;
margin: 32px auto 0;
}
@media screen and (max-width: 756px) {
.topCampaignArea .topCampaignCarousel {
width: inherit;
margin-top: 24px;
padding-bottom: 0;
}
}
.topCampaignArea .topCampaignCarousel .campaignCarouselContainer {
display: none;
}
.topCampaignArea .topCampaignCarousel .campaignCarouselContainer.slick-initialized {
display: block;
}
.topCampaignArea .topCampaignCarousel a {
margin: 0 8px;
display: block;
width: 200px;
}
@media screen and (max-width: 756px) {
.topCampaignArea .topCampaignCarousel a {
width: 100%;
}
}
.topCampaignArea .topCampaignCarousel a:hover {
opacity: 0.6;
}
.topCampaignArea .topCampaignCarousel a img {
width: 200px;
height: auto;
}
@media screen and (max-width: 756px) {
.topCampaignArea .topCampaignCarousel a img {
width: 100% !important;
}
}
.topCampaignArea .topCampaignCarousel .slick-prev {
background-color: #fff;
background-image: none;
border-radius: 50%;
width: 40px;
height: 40px;
z-index: 1;
left: -50px;
top: calc(50% - 20px);
-webkit-box-shadow: 0px 0px 10px 4px #ebebeb;
box-shadow: 0px 0px 10px 4px #ebebeb;
outline: none;
}
@media screen and (max-width: 756px) {
.topCampaignArea .topCampaignCarousel .slick-prev {
display: none !important;
}
}
.topCampaignArea .topCampaignCarousel .slick-prev i {
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: #0783c2;
font-size: 24px;
width: 24px;
height: 24px;
}
.topCampaignArea .topCampaignCarousel .slick-prev:hover {
opacity: 1;
background-color: #37b4f3;
}
.topCampaignArea .topCampaignCarousel .slick-prev:hover i {
color: #fff;
}
.topCampaignArea .topCampaignCarousel .slick-next {
position: absolute;
background-color: #fff;
background-image: none;
border-radius: 50%;
width: 40px;
height: 40px;
z-index: 1;
right: -30px;
top: calc(50% - 20px);
-webkit-box-shadow: 0px 0px 10px 4px #ebebeb;
box-shadow: 0px 0px 10px 4px #ebebeb;
outline: none;
}
@media screen and (max-width: 756px) {
.topCampaignArea .topCampaignCarousel .slick-next {
display: none !important;
}
}
.topCampaignArea .topCampaignCarousel .slick-next i {
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: #0783c2;
font-size: 24px;
width: 24px;
height: 24px;
}
.topCampaignArea .topCampaignCarousel .slick-next:hover {
opacity: 1;
background-color: #37b4f3;
}
.topCampaignArea .topCampaignCarousel .slick-next:hover i {
color: #fff;
}
@media screen and (min-width: 757px) {
.topCampaignArea .topCampaignCarousel .dotsContainer {
bottom: -24px;
}
}
.topCampaignArea .topCampaignCarousel .dotsContainer .slick-dots li {
padding: 0;
background-color: #fff;
border-radius: 50%;
border: 1px solid #37b4f3;
font-size: 0px;
width: 10px;
height: 10px;
margin-left: 4px;
text-indent: -9999px;
opacity: 1;
outline: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 756px) {
.topCampaignArea .topCampaignCarousel .dotsContainer .slick-dots li {
margin: 0 2px;
}
}
.topCampaignArea .topCampaignCarousel .dotsContainer .slick-dots li.slick-active {
background-color: #0783c2;
border-color: #0783c2;
}
.topCampaignArea .topCampaignCarousel .dotsContainer .slick-dots li:hover {
background-color: #37b4f3;
border-color: #37b4f3;
}
.topCampaignArea .centerBtn {
margin-top: 32px;
}
@media screen and (max-width: 756px) {
.topCampaignArea .centerBtn {
margin-top: 24px;
}
}
.topConsultArea .topConsultArea-head {
background-color: #0783c2;
margin-top: 72px;
padding: 48px 0;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-head {
margin-top: 40px;
padding: 32px 0;
}
}
.topConsultArea .topConsultArea-head .articleTtl {
color: #fff;
font-size: 34px;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-head .articleTtl {
font-size: 26px;
}
}
.topConsultArea .topConsultArea-head .articleTtl span {
position: relative;
padding-left: 56px;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-head .articleTtl span {
padding-left: 40px;
}
}
.topConsultArea .topConsultArea-head .articleTtl span .consultHead-icon {
display: block;
position: absolute;
top: calc(50% - 20px);
left: 0;
background-image: url(/assets/img/top/ico_consult.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-right: 16px;
width: 40px;
height: 40px;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-head .articleTtl span .consultHead-icon {
top: calc(50% - 16px);
width: 32px;
height: 32px;
}
}
.topConsultArea .topConsultArea-head p {
color: #fff;
margin-top: 8px;
font-size: 21px;
text-align: center;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-head p {
font-size: 16px;
}
}
.topConsultArea .topConsultArea-content {
background-color: #ebebeb;
padding: 40px 0;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content {
padding: 32px 16px 16px;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
width: 907px;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL {
width: 100%;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a {
background-color: #fff;
border: 2px solid #0783c2;
border-radius: 4px;
color: #0783c2;
display: block;
font-size: 28px;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 24px;
width: 440px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 757px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a:first-child span {
line-height: 80px;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a:hover {
background-color: #37b4f3;
border-color: #37b4f3;
color: white;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a {
width: 100%;
font-size: 18px;
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a:nth-child(n+2) {
margin-top: 16px;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a .topConsultArea-linkL_inner {
display: inline-block;
position: relative;
padding-left: 48px;
text-align: left;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a .topConsultArea-linkL_inner {
font-size: 22px;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a .topConsultArea-linkL_inner span {
font-size: 13px;
display: block;
text-align: left;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a .topConsultArea-linkL_inner span {
font-size: 12px;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a .topConsultArea-linkL_inner .rex-icon {
position: absolute;
left: 0;
top: calc(50% - 20px);
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a .topConsultArea-linkL_inner .rex-icon {
top: calc(50% - 18px);
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a .topConsultArea-linkL_inner .rex-icon::before {
font-size: 40px;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapL a .topConsultArea-linkL_inner .rex-icon::before {
font-size: 36px;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 24px auto 0;
width: 707px;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS {
width: 100%;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a {
background-color: #fff;
border-radius: 4px;
color: #0783c2;
font-weight: bold;
font-size: 18px;
width: 340px;
padding: 24px 0;
text-align: center;
text-decoration: none;
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a:only-child {
margin: 0 auto;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a {
width: calc(50% - 8px);
font-size: 15px;
padding: 16px 0;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a:hover {
background-color: #f7f7f7;
border-color: #f7f7f7;
color: #37b4f3;
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a span {
position: relative;
padding-left: 40px;
display: inline-block;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a span {
padding: 40px 0 0;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a span .pear-consult-f {
position: absolute;
content: '';
background-image: url(/assets/img/top/ico_pear_consult.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
top: calc(50% - 16px);
left: 0;
width: 32px;
height: 32px;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a span .pear-consult-f {
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a span .rex-icon {
position: absolute;
top: calc(50% - 16px);
left: 0;
width: 32px;
height: 32px;
}
@media screen and (max-width: 756px) {
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a span .rex-icon {
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
}
.topConsultArea .topConsultArea-content .topConsultArea-linkWrapS a span .rex-icon:before {
font-size: 32px;
}
.infoArea {
width: 1072px;
margin: 0 auto;
padding: 72px;
}
@media screen and (max-width: 756px) {
.infoArea {
padding: 56px 16px 80px;
width: inherit;
}
}
.infoArea .articleTtl {
font-weight: bold;
font-size: 34px;
}
@media screen and (max-width: 756px) {
.infoArea .articleTtl {
font-size: 22px;
}
}
.infoArea .articleTtl span {
position: relative;
padding-left: 56px;
}
@media screen and (max-width: 756px) {
.infoArea .articleTtl span {
padding-left: 40px;
}
}
.infoArea .articleTtl span .rex-icon {
position: absolute;
top: calc(50% - 20px);
left: 0;
}
.infoArea .articleTtl span .rex-icon:before {
font-size: 40px;
color: #0783c2;
}
@media screen and (max-width: 756px) {
.infoArea .articleTtl span .rex-icon:before {
font-size: 32px;
}
}
.infoArea .articleTtl.articleTtl_bd {
padding-bottom: 40px;
}
@media screen and (min-width: 757px) {
.infoArea .articleList {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
}
@media screen and (max-width: 756px) {
.infoArea .articleList {
padding: 24px 48px 24px 0;
}
}
.infoArea .articleList:hover {
background-color: #fff;
/*
.articleList-ttl{
color:$life-light;
}
*/
}
.infoArea .articleList .articleList-date {
margin-bottom: 0;
color: #828282;
font-size: 14px;
padding-right: 16px;
}
@media screen and (min-width: 757px) {
.infoArea .articleList .articleList-date {
width: 112px;
}
}
@media screen and (max-width: 756px) {
.infoArea .articleList .articleList-date {
font-size: 13px;
display: inline-block;
}
}
.infoArea .articleList .articleList-cat {
margin-top: 0;
color: #4d4d4d;
font-weight: bold;
font-size: 14px;
padding-right: 24px;
}
@media screen and (min-width: 757px) {
.infoArea .articleList .articleList-cat {
width: 124px;
}
}
@media screen and (max-width: 756px) {
.infoArea .articleList .articleList-cat {
font-size: 13px;
display: inline-block;
}
}
.infoArea .articleList .articleList-cat a {
text-decoration: none;
}
.infoArea .articleList .articleList-ttl {
margin-bottom: 0;
font-size: 16px;
}
@media screen and (min-width: 757px) {
.infoArea .articleList .articleList-ttl {
max-width: 745px;
}
}
.infoArea .articleList .articleList-ttl a {
text-decoration: none;
display: inline;
color: #0783c2;
}
@media screen and (max-width: 756px) {
.infoArea .articleList .articleList-ttl {
margin-top: 8px;
}
}
@media screen and (max-width: 756px) {
.infoArea .articleList i {
font-size: 16px;
}
}
.infoArea .centerBtn {
margin-top: 32px;
}
@media screen and (max-width: 756px) {
.infoArea .centerBtn {
margin-top: 24px;
}
}
.infoArea .attention_wrap {
margin-top: 40px;
}
@media screen and (max-width: 756px) {
.infoArea .attention_wrap {
margin-top: 32px;
}
}
.infoArea .attention_wrap a {
text-decoration: none;
}
.infoArea .attention_wrap a:hover, .infoArea .attention_wrap a:focus {
text-decoration: none;
color: #ff1212;
}
.topCompanyArea {
background: #f7f7f7;
margin-bottom: 112px;
}
@media screen and (max-width: 756px) {
.topCompanyArea {
margin-bottom: 80px;
}
}
.topCompanyArea .topCompanyArea-inner {
max-width: 1074px;
margin: 0 auto;
padding: 80px 0;
}
@media screen and (max-width: 756px) {
.topCompanyArea .topCompanyArea-inner {
padding: 47px 16px 41px;
}
}
.topCompanyArea .topCompanyArea-inner .topCompanyArea-ttl {
font-size: 32px;
color: #333;
text-align: center;
}
@media screen and (max-width: 756px) {
.topCompanyArea .topCompanyArea-inner .topCompanyArea-ttl {
font-size: 26px;
}
}
.topCompanyArea .topCompanyArea-inner .topCompanyArea-ttl span {
position: relative;
padding-left: 56px;
}
@media screen and (max-width: 756px) {
.topCompanyArea .topCompanyArea-inner .topCompanyArea-ttl span {
padding-left: 40px;
}
}
.topCompanyArea .topCompanyArea-inner .topCompanyArea-ttl span .CompanyArea-icon {
position: absolute;
top: calc(50% - 20px);
left: 0;
background-image: url(/assets/img/icon/ico_company.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 40px;
height: 40px;
display: inline-block;
}
@media screen and (max-width: 756px) {
.topCompanyArea .topCompanyArea-inner .topCompanyArea-ttl span .CompanyArea-icon {
width: 32px;
height: 32px;
}
}
.topCompanyArea .topCompanyArea-inner .company-wrap {
margin-top: 47px;
}
@media screen and (max-width: 756px) {
.topCompanyArea .topCompanyArea-inner .company-wrap {
margin-top: 34px;
}
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec:not(:first-child) {
margin-top: 36px;
}
@media screen and (max-width: 756px) {
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec:not(:first-child) {
margin-top: 31px;
}
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__ttl {
font-size: 24px;
color: #333;
text-align: center;
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 21px;
}
@media screen and (max-width: 756px) {
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list {
margin-top: 16px;
}
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item {
height: 60px;
position: relative;
background-color: white;
-webkit-transition: .1s linear;
transition: .1s linear;
}
@media screen and (min-width: 757px) {
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item {
width: calc((99% - 40px)/6);
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item:not(:nth-child(6n)) {
margin-right: 8px;
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item:not(:nth-child(-n+6)) {
margin-top: 8px;
}
}
@media screen and (max-width: 756px) {
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item {
width: calc((100% / 2) - 4px);
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item:not(:nth-child(2n)) {
margin-right: 8px;
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item:not(:nth-child(-n+2)) {
margin-top: 8px;
}
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item a {
width: 100%;
height: 100%;
display: block;
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item a:hover {
opacity: .75;
}
.topCompanyArea .topCompanyArea-inner .company-wrap .company-sec .company-sec__list .company-sec__list-item img {
position: absolute;
width: auto;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: calc(100% - 32px);
max-height: calc(100% - 32px);
margin: auto;
}
.topCompanyArea .topCompanyArea-inner .topCompanyArea-note {
font-size: 12px;
margin-top: 32px;
}
.topCompanyArea .topCompanyArea-inner .topCompanyArea-note .note-anchor {
color: #0783c2;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.topCompanyArea .topCompanyArea-inner .topCompanyArea-note .note-anchor:hover {
text-decoration: none;
color: #37b2f0;
}
.topAdArea {
margin-bottom: 64px;
}
@media screen and (max-width: 756px) {
.topAdArea {
margin-bottom: 0;
}
}
.topAdArea .topAdCarouselContainer {
position: relative;
padding-bottom: 30px;
display: none;
}
.topAdArea .topAdCarouselContainer.slick-initialized {
display: block;
}
@media screen and (min-width: 757px) {
.topAdArea .topAdCarouselContainer .slick-list {
width: 1000px;
margin: 0 auto;
}
}
.topAdArea .topAdCarouselContainer a {
display: block;
margin: 0 12px;
}
@media screen and (max-width: 756px) {
.topAdArea .topAdCarouselContainer a {
width: inherit;
margin: 0 6px;
}
}
.topAdArea .topAdCarouselContainer a img {
width: 100%;
}
.topAdArea .slick-prev {
background-color: #fff;
background-image: none;
border-radius: 50%;
width: 40px;
height: 40px;
z-index: 1;
left: calc((100% - 1000px)/2 - 40px);
top: calc(50% - 40px);
-webkit-box-shadow: 0px 0px 10px 4px #ebebeb;
box-shadow: 0px 0px 10px 4px #ebebeb;
outline: none;
}
@media screen and (max-width: 756px) {
.topAdArea .slick-prev {
display: none !important;
}
}
.topAdArea .slick-prev i {
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: #0783c2;
font-size: 24px;
width: 24px;
height: 24px;
}
.topAdArea .slick-prev:hover {
opacity: 1;
background-color: #37b4f3;
}
.topAdArea .slick-prev:hover i {
color: #fff;
}
.topAdArea .slick-next {
position: absolute;
background-color: #fff;
background-image: none;
border-radius: 50%;
width: 40px;
height: 40px;
z-index: 1;
right: calc((100% - 1000px)/2 - 40px);
top: calc(50% - 40px);
-webkit-box-shadow: 0px 0px 10px 4px #ebebeb;
box-shadow: 0px 0px 10px 4px #ebebeb;
outline: none;
}
@media screen and (max-width: 756px) {
.topAdArea .slick-next {
display: none !important;
}
}
.topAdArea .slick-next i {
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: #0783c2;
font-size: 24px;
width: 24px;
height: 24px;
}
.topAdArea .slick-next:hover {
opacity: 1;
background-color: #37b4f3;
}
.topAdArea .slick-next:hover i {
color: #fff;
}
@media screen and (min-width: 757px) {
.topAdArea .dotsContainer {
bottom: -24px;
}
}
.topAdArea .dotsContainer li {
padding: 0;
background-color: #fff;
border-radius: 50%;
border: 1px solid #37b4f3;
font-size: 0px;
width: 10px;
height: 10px;
text-indent: -9999px;
opacity: 1;
outline: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left: 4px;
}
@media screen and (max-width: 756px) {
.topAdArea .dotsContainer li {
margin: 0 2px;
}
}
.topAdArea .dotsContainer li.slick-active {
background-color: #0783c2;
border-color: #0783c2;
}
.topAdArea .dotsContainer li:hover {
background-color: #37b4f3;
border-color: #37b4f3;
}
/* ==================================================================
Utility
================================================================== */
/* device */
.pcOnly {
display: block !important;
}
img.pcOnly {
display: inline-block !important;
}
.spOnly, img.spOnly {
display: none !important;
}
/* font-family */
.font_serif {
font-family: "ＭＳ 明朝", "ＭＳ Ｐ明朝", serif !important;
}
/* font-size */
.fs12 {
font-size: 12px !important;
}
.fs13 {
font-size: 13px !important;
}
.fs14 {
font-size: 14px !important;
}
.fs15 {
font-size: 15px !important;
}
.fs16 {
font-size: 16px !important;
}
.fs17 {
font-size: 17px !important;
}
.fs18 {
font-size: 18px !important;
}
.fs19 {
font-size: 19px !important;
}
.fs20 {
font-size: 20px !important;
}
.fs21 {
font-size: 21px !important;
}
.fs22 {
font-size: 22px !important;
}
.fs23 {
font-size: 23px !important;
}
.fs24 {
font-size: 24px !important;
}
.fs25 {
font-size: 25px !important;
}
.fs26 {
font-size: 26px !important;
}
.fs27 {
font-size: 27px !important;
}
.fs28 {
font-size: 28px !important;
}
.fs29 {
font-size: 29px !important;
}
.fs30 {
font-size: 30px !important;
}
.fs31 {
font-size: 31px !important;
}
.fs32 {
font-size: 32px !important;
}
.fs33 {
font-size: 33px !important;
}
.fs34 {
font-size: 34px !important;
}
.fs35 {
font-size: 35px !important;
}
.fs36 {
font-size: 36px !important;
}
.fs37 {
font-size: 37px !important;
}
.fs38 {
font-size: 38px !important;
}
.fs39 {
font-size: 39px !important;
}
.fs40 {
font-size: 40px !important;
}
.fs41 {
font-size: 41px !important;
}
.fs42 {
font-size: 42px !important;
}
.fs43 {
font-size: 43px !important;
}
.fs44 {
font-size: 44px !important;
}
.fs45 {
font-size: 45px !important;
}
.fs46 {
font-size: 46px !important;
}
.fs47 {
font-size: 47px !important;
}
.fs48 {
font-size: 48px !important;
}
.fs49 {
font-size: 49px !important;
}
.fs50 {
font-size: 50px !important;
}
.fs51 {
font-size: 51px !important;
}
.fs52 {
font-size: 52px !important;
}
/* color */
/* Layout */
.layoutL {
text-align: left !important;
}
.layoutC {
text-align: center !important;
}
.layoutR {
text-align: right !important;
}
/* margin */
.mt0 {
margin-top: 0px !important;
}
.mt5 {
margin-top: 5px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mt45 {
margin-top: 45px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mt55 {
margin-top: 55px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mt65 {
margin-top: 65px !important;
}
.mt70 {
margin-top: 70px !important;
}
.mt75 {
margin-top: 75px !important;
}
.mt80 {
margin-top: 80px !important;
}
.mt85 {
margin-top: 85px !important;
}
.mt90 {
margin-top: 90px !important;
}
.mt95 {
margin-top: 95px !important;
}
.mt100 {
margin-top: 100px !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;
}
.mb35 {
margin-bottom: 35px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.mb45 {
margin-bottom: 45px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.mb55 {
margin-bottom: 55px !important;
}
.mb60 {
margin-bottom: 60px !important;
}
.mb65 {
margin-bottom: 65px !important;
}
.mb70 {
margin-bottom: 70px !important;
}
.mb75 {
margin-bottom: 75px !important;
}
.mb80 {
margin-bottom: 80px !important;
}
.mb85 {
margin-bottom: 85px !important;
}
.mb90 {
margin-bottom: 90px !important;
}
.mb95 {
margin-bottom: 95px !important;
}
.mb100 {
margin-bottom: 100px !important;
}
.ml0 {
margin-left: 0px !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
.ml15 {
margin-left: 15px !important;
}
.ml20 {
margin-left: 20px !important;
}
.ml25 {
margin-left: 25px !important;
}
.ml30 {
margin-left: 30px !important;
}
.ml35 {
margin-left: 35px !important;
}
.ml40 {
margin-left: 40px !important;
}
.ml45 {
margin-left: 45px !important;
}
.ml50 {
margin-left: 50px !important;
}
.ml55 {
margin-left: 55px !important;
}
.ml60 {
margin-left: 60px !important;
}
.ml65 {
margin-left: 65px !important;
}
.ml70 {
margin-left: 70px !important;
}
.ml75 {
margin-left: 75px !important;
}
.ml80 {
margin-left: 80px !important;
}
.ml85 {
margin-left: 85px !important;
}
.ml90 {
margin-left: 90px !important;
}
.ml95 {
margin-left: 95px !important;
}
.ml100 {
margin-left: 100px !important;
}
.mr0 {
margin-right: 0px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mr15 {
margin-right: 15px !important;
}
.mr20 {
margin-right: 20px !important;
}
.mr25 {
margin-right: 25px !important;
}
.mr30 {
margin-right: 30px !important;
}
.mr35 {
margin-right: 35px !important;
}
.mr40 {
margin-right: 40px !important;
}
.mr45 {
margin-right: 45px !important;
}
.mr50 {
margin-right: 50px !important;
}
.mr55 {
margin-right: 55px !important;
}
.mr60 {
margin-right: 60px !important;
}
.mr65 {
margin-right: 65px !important;
}
.mr70 {
margin-right: 70px !important;
}
.mr75 {
margin-right: 75px !important;
}
.mr80 {
margin-right: 80px !important;
}
.mr85 {
margin-right: 85px !important;
}
.mr90 {
margin-right: 90px !important;
}
.mr95 {
margin-right: 95px !important;
}
.mr100 {
margin-right: 100px !important;
}
.mAuto {
margin: 0 auto !important;
}
/* padding */
.pt0 {
padding-top: 0px !important;
}
.pt5 {
padding-top: 5px !important;
}
.pt10 {
padding-top: 10px !important;
}
.pt15 {
padding-top: 15px !important;
}
.pt20 {
padding-top: 20px !important;
}
.pt25 {
padding-top: 25px !important;
}
.pt30 {
padding-top: 30px !important;
}
.pt35 {
padding-top: 35px !important;
}
.pt40 {
padding-top: 40px !important;
}
.pt45 {
padding-top: 45px !important;
}
.pt50 {
padding-top: 50px !important;
}
.pt55 {
padding-top: 55px !important;
}
.pt60 {
padding-top: 60px !important;
}
.pt65 {
padding-top: 65px !important;
}
.pt70 {
padding-top: 70px !important;
}
.pt75 {
padding-top: 75px !important;
}
.pt80 {
padding-top: 80px !important;
}
.pt85 {
padding-top: 85px !important;
}
.pt90 {
padding-top: 90px !important;
}
.pt95 {
padding-top: 95px !important;
}
.pt100 {
padding-top: 100px !important;
}
.pb0 {
padding-bottom: 0px !important;
}
.pb5 {
padding-bottom: 5px !important;
}
.pb10 {
padding-bottom: 10px !important;
}
.pb15 {
padding-bottom: 15px !important;
}
.pb20 {
padding-bottom: 20px !important;
}
.pb25 {
padding-bottom: 25px !important;
}
.pb30 {
padding-bottom: 30px !important;
}
.pb35 {
padding-bottom: 35px !important;
}
.pb40 {
padding-bottom: 40px !important;
}
.pb45 {
padding-bottom: 45px !important;
}
.pb50 {
padding-bottom: 50px !important;
}
.pb55 {
padding-bottom: 55px !important;
}
.pb60 {
padding-bottom: 60px !important;
}
.pb65 {
padding-bottom: 65px !important;
}
.pb70 {
padding-bottom: 70px !important;
}
.pb75 {
padding-bottom: 75px !important;
}
.pb80 {
padding-bottom: 80px !important;
}
.pb85 {
padding-bottom: 85px !important;
}
.pb90 {
padding-bottom: 90px !important;
}
.pb95 {
padding-bottom: 95px !important;
}
.pb100 {
padding-bottom: 100px !important;
}
.pl0 {
padding-left: 0px !important;
}
.pl5 {
padding-left: 5px !important;
}
.pl10 {
padding-left: 10px !important;
}
.pl15 {
padding-left: 15px !important;
}
.pl20 {
padding-left: 20px !important;
}
.pl25 {
padding-left: 25px !important;
}
.pl30 {
padding-left: 30px !important;
}
.pl35 {
padding-left: 35px !important;
}
.pl40 {
padding-left: 40px !important;
}
.pl45 {
padding-left: 45px !important;
}
.pl50 {
padding-left: 50px !important;
}
.pl55 {
padding-left: 55px !important;
}
.pl60 {
padding-left: 60px !important;
}
.pl65 {
padding-left: 65px !important;
}
.pl70 {
padding-left: 70px !important;
}
.pl75 {
padding-left: 75px !important;
}
.pl80 {
padding-left: 80px !important;
}
.pl85 {
padding-left: 85px !important;
}
.pl90 {
padding-left: 90px !important;
}
.pl95 {
padding-left: 95px !important;
}
.pl100 {
padding-left: 100px !important;
}
.pr0 {
padding-right: 0px !important;
}
.pr5 {
padding-right: 5px !important;
}
.pr10 {
padding-right: 10px !important;
}
.pr15 {
padding-right: 15px !important;
}
.pr20 {
padding-right: 20px !important;
}
.pr25 {
padding-right: 25px !important;
}
.pr30 {
padding-right: 30px !important;
}
.pr35 {
padding-right: 35px !important;
}
.pr40 {
padding-right: 40px !important;
}
.pr45 {
padding-right: 45px !important;
}
.pr50 {
padding-right: 50px !important;
}
.pr55 {
padding-right: 55px !important;
}
.pr60 {
padding-right: 60px !important;
}
.pr65 {
padding-right: 65px !important;
}
.pr70 {
padding-right: 70px !important;
}
.pr75 {
padding-right: 75px !important;
}
.pr80 {
padding-right: 80px !important;
}
.pr85 {
padding-right: 85px !important;
}
.pr90 {
padding-right: 90px !important;
}
.pr95 {
padding-right: 95px !important;
}
.pr100 {
padding-right: 100px !important;
}
/* background-color */
.bg_gray {
background: #f7f7f7;
}
@media screen and (max-width: 756px) {
/* device */
.spOnly {
display: block !important;
}
img.spOnly {
display: inline-block !important;
}
.pcOnly, img.pcOnly {
display: none !important;
}
/* font-size */
.sp_min {
font-size: 85%;
}
hr.bdGray {
margin: 30px 0;
}
}
.quate-area {
padding: 40px;
background-color: #ebebeb;
}
@media screen and (max-width: 756px) {
.quate-area {
padding: 24px 16px;
}
}
@media screen and (min-width: 757px) {
.quate-area .quate-inner {
width: 767px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
}
@media screen and (max-width: 756px) {
.quate-area .quate-inner {
text-align: center;
padding: 0;
}
}
.quate-area .quate-inner p {
position: relative;
background-color: #fff;
font-size: 20px;
font-weight: bold;
padding: 16px;
width: 400px;
border-radius: 32px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 756px) {
.quate-area .quate-inner p {
margin: 0 auto;
font-size: 16px;
display: inline-block;
width: inherit;
padding: 13px 32px;
}
}
.quate-area .quate-inner p:after {
content: '';
position: absolute;
background-image: url(/assets/img/top/pc/bg_comment.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 32px;
height: 17px;
bottom: 10px;
right: -20px;
}
@media screen and (max-width: 756px) {
.quate-area .quate-inner p:after {
width: 29px;
height: 14px;
bottom: -14px;
left: 0;
right: 0;
margin: 0 auto;
background-image: url(/assets/img/top/sp/bg_comment.png);
}
}
.quate-area .quate-inner a {
text-decoration: none;
padding: 16px;
background-color: #fff;
border-radius: 4px;
border: 2px solid #bf0000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
.quate-area .quate-inner a:hover {
background-color: #ff1212;
border-color: #ff1212;
}
.quate-area .quate-inner a:hover span {
color: #fff;
}
.quate-area .quate-inner a:hover span i {
color: #fff;
}
@media screen and (min-width: 757px) {
.quate-area .quate-inner a {
width: 320px;
}
}
@media screen and (max-width: 756px) {
.quate-area .quate-inner a {
display: inline-block;
margin: 24px auto 0;
padding: 16px 0;
width: 100%;
}
}
.quate-area .quate-inner a span {
font-size: 17px;
position: relative;
color: #bf0000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: bold;
}
.quate-area .quate-inner a span i {
font-size: 16px;
margin-left: 4px;
}
