@charset "UTF-8"; /* Reset */ * { box-sizing: border-box; } ul {list-style:none;} ul,li {margin:0; padding:0;} a {/*color:#0d97ff;*/ color:#2698ed;text-decoration:none; outline:none;} p a {text-decoration:underline;} img {vertical-align:middle;} p,dl,dt,dd {margin:0;} figure {margin:0;} /* 見出し */ h1,h2,h3,h4,h5,h6 {margin:0;} address,caption,em,th {font-style:normal;} /* Fluid-img */ img {width:100%; height:auto;} /* -------------------------------------------------- ベース -------------------------------------------------- */ /* HTML */ /*html {background-color:#fafafa; color:#222; font-size:13px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight:300; line-height:1.6;}*/ html {background-color:#fafafa; color:#37474f;font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; line-height:1.5; height:100%; scroll-padding-top: 120px;}/* 基準フォントサイズは14px */ /* レイアウト */ #contents {margin:0} #contents .inner{ width:90%; margin:6vw auto 8vw;} #contents .inner.pdt{ margin-top: 0 !important;} #contents .inner.pdt h2{margin-top: 0 !important;} /* Fluid-img */ img {width:100%; height:auto;} .text_red{color:#4374D7;} .msg_class{display: block;color: #cc2f53; margin-left: 2.8%; margin-bottom: 1%;} /* Flexboxレイアウト */ .flex {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;} .red_hissu{font-weight: normal;background-color:#e18895;color:#fff;padding:0.1em 0.1em;border-radius:3px;} .sp_only {display:none;} /* パンクズ */ .breadcrumb{ display: block; width:90%;padding:4% 0;margin: auto; font-size: 0.8em;} .breadcrumb ul{ display: flex; justify-content: flex-start; align-items: center;} .breadcrumb li{font-size:.9em; display:block;} .breadcrumb li a:after {margin:0 .5em; content: ">"; color:#999;} .breadcrumb li:nth-child(n+2){/*width: 300px;*/width:auto; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} /* -------------------------------------------------- ヘッダ -------------------------------------------------- */ #header { width:100%; padding:2% 0; overflow:hidden; box-sizing:border-box; background-color: rgba(255, 255, 255, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /*position: relative; top: 1px; margin-top: -1px;*/} #header h1 {/*float:left;*/ display: block;} header.fixed {position: fixed;left: 0;top: 0;z-index:10;} #header .inner{ display: flex;align-items: center; justify-content:space-between;width: 96%; margin: auto;} /* メニュートグル＆ハンバーガーアイコン */ .drawer_toggle {position:relative; width:38px; height:38px; float:right; color:#4474e3; border:1px solid #fff; cursor:pointer; z-index:800;} .drawer_toggle_icon {display:block; position:absolute; left:9px; top:17px;} .drawer_toggle_icon,.drawer_toggle_icon:before,.drawer_toggle_icon:after {content:""; position:absolute; width:24px; height:2px; background-color:#002f6c; transition: all 0.5s ease;} .drawer_toggle_icon:before {top:-8px;} .drawer_toggle_icon:after {top:8px;} /* メニュートグル＆クローズアイコン */ .drawer_toggle.open {} .drawer_toggle.open .drawer_toggle_icon,.drawer_toggle.open .drawer_toggle_icon:before,.drawer_toggle.open .drawer_toggle_icon:after {width:auto; height:auto; top:0; transition: all 0.5s ease;} .drawer_toggle.open .drawer_toggle_icon {left:9px; top:17px; width:20px; height:2px; background-color:#002f6c; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } .drawer_toggle.open .drawer_toggle_icon:after {content:""; display:block; width:100%; height:100%; background-color:inherit; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } /* -------------------------------------------------- Gナビ（SP用） -------------------------------------------------- */ #g_navi {display:none; position:relative; top:10vw; left:0; width:100%; /*box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1);*/ z-index:700; padding: 4% 0 10%;} #g_navi ul {} #g_navi li {line-height:1;} #g_navi a {display:block; color:#222; text-decoration:none; padding:4%; text-align: center;} /*アカウント登録、ログイン*/ #g_navi li.btn33{padding: 1.2% 1.9% 0.8% 1%; border-radius: 2px; top:0px; position:relative; background: #fff;border: 1px solid #1e88e5; width: 80%; margin: 2% auto;} #g_navi li.btn33 a{color: #1e88e5;} #g_navi li:hover a{background:rgba(217, 242, 251, 0.5);} #g_navi li.btn33 a:hover:after{display: none;} /*言語*/ #g_navi li.btn44 a{color: #008e76;} #g_navi li.btn44:hover:last-child a{background:rgba(190, 250, 222, 0.5);} #g_navi li.btn44:last-child a:hover:after{display: none;} /* -------------------------------------------------- ページトップ -------------------------------------------------- */ #backToTop {position:fixed; right:10px; bottom:10px; line-height:1; cursor:pointer; z-index:900; background-color:rgba(68,116,227,0.9); padding:14px 14px 7px; text-align:center; color:#fff; font-size:14px; font-weight:300; line-height:1; border-radius:300px; border:2px solid #fff;} #backToTop .angle-up {display:block; width:25px; height:25px; border-top:1px solid #fff; border-left:1px solid #fff; margin:0 auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } #backToTop em {display:block; margin-top:-5px;} #backToTop:hover {background-color:#50C7C6;} /* -------------------------------------------------- フッター -------------------------------------------------- */ #footer {background-color:#eee; text-align:center;} #footer h1 {width:40vw; margin:0 auto; padding:6.25vw 0;} #footer ul {border-top:1px solid #ccc;} #footer li {font-size:3.28vw;} #footer li a {display:block; color:#666; padding:1.5em 0; border-bottom:1px solid #ccc;} #footer .copyright {color:#666; font-size:2.5vw; padding:2em 0;} /* -------------------------------------------------- 共通ツール -------------------------------------------------- */ /* クリアフィックス */ .clearfix:after {content:""; clear:both; display:block;} /* 画像左右寄せ */ .float_left {float:left; margin:0 1em 1em 0;} .float_right {float:right; margin:0 0 1em 1em;} /* 画像サイズ指定 */ .w200 img {width:200px; height:auto;} .w100 img {width:100px; height:auto;} .w150 img {width:150px; height:auto;} /* 画像角丸 */ .radius img {border-radius:4px;} /* キャプション付き画像 */ .caption_img {width:90%; margin:2em auto; background-color:#eee;} .caption_img p {font-size:0.8em; font-weight:bold; padding:1em; line-height:1.3; margin-bottom:0;} .hissu{ background-color:#ff7043; color:#ff7043; font-size:0px; padding:0.6% 1.4%; border-radius:4px; margin:0 0 0 5px; top:-6px; position:relative;} .red{ color:#FA585B;} .f140{ font-size:140%;} .mb60{ margin-bottom:60px;} .msgarea01{ /*background-color:#F6E6E4;padding:1.4%; border-radius:2px;*/ margin:0 0 20px;color:#cc2f53;font-size:1.0rem;} .b01{font-weight: bold; font-size:120%;} /* ページャー */ .pager {width:100%; font-family:Arial, Helvetica, sans-serif; margin: 4vw 0 0;} .pager ul {-webkit-justify-content: center; justify-content: center;} .pager li {background-color:#fbfbfb; line-height:1; margin-right:5px;} .pager li:last-child {margin-right:0;} .pager li a {display:block; padding:1.5em;} .pager li.current {display:block; padding:1.5em;} /* -------------------------------------------------- トップページ -------------------------------------------------- */ /*ファーストビュー*/ .first{ background-color:#4374D7; overflow:hidden; background-image:url(images/first_bg2.png); background-repeat:no-repeat; background-size:cover; background-position:bottom;} .catch{ overflow:hidden; background-image:url(images/incom2.jpg); background-size:15%; background-position:100% 90px; background-repeat:no-repeat;} .catch h2{ width:100%; position:relative; left:0px; top:80px; text-align:center; color:#fff; font-size:24px;} .catch h2 span{ font-size:22px; margin:0 10px; font-weight:normal;} .catch p.lead{ display:block; width:100%; font-size:14px; margin:0px; font-weight:normal; position:relative; left:0px; top:40px; text-align:center; background-image:url(images/h2_lead_bg.png); padding:0px; border-radius:4px; color:#fff;} .catch .button a{ display:block; width:230px; padding:10px; margin:120px auto 60px; box-sizing:border-box; position:relative; left:0px; background-color:#59D181; color:#fff; border-radius:6px; box-shadow:2px 2px 2px #484848; text-align:center; text-decoration:none; font-size:16px; font-weight:bold;} .catch .button a span{ font-size:14px; font-weight:normal;} .catch .button a:after {font-family:Font Awesome 5 free; content:"\f105"; font-size:16px; margin-left:8px; font-weight: 900;} h3{ display:block; width:100%; background-size:cover; background-repeat:no-repeat; text-align:center; background-position:-50%; font-size:32px; text-shadow:0 0 15px #333, 0 0 15px #333, 0 0 0.40px #333; color:#fff;} h3 span{ display:block; width:100%; background-image:url(../images/h3_span_bg.png); padding:20px 0;} /*スマホアプリincomとは？*/ h3.bike{ background-image:url(../images/h3_bg_bike.jpg);} #second{ background-color:#57C77D; padding:30px 0; text-align:center; color:#fff;} #second img{ /*width:auto;*/ width:30%;} #second h4{ font-size:28px; font-weight:bold; margin:0 0 15px;} #second .mugendai{margin:0 0 20px;} #second p{ font-size:16px;} .chart {width:87vw; margin:0 auto 8vw;} /*料金プラン*/ h3.floor{background-image:url(../images/h3_bg_floor.jpg);} #third{ background-color:#FEAD7F; padding:60px 0; color:#fff;} #third table{ background-color:#FFC8AD; width:100%; border:none; color:#666666;} #third table tr{ } #third table tr.uline{ border-bottom:1px solid #FEAD7F;} #third table td{ padding:10px; text-align:center; box-sizing:border-box; vertical-align:middle;} #third table td span.or{ display:block; width:auto; padding:10px 5px; background-color:#FEAD7F; border-radius:4px; box-sizing:border-box; color:#fff;} #third table td.tit{ font-size:16px; background-repeat:no-repeat; background-position:center; font-weight:bold; height:120px;} #third table td.simple{ background-image:url(../images/bg_simpleplan.png); } #third table td.buisiness{ background-image:url(../images/bg_buisinessplan.png); } #third table td.event{ background-image:url(../images/bg_eventplan.png); } /*よくある質問*/ h3.faq{background-image:url(../images/h3_bg_event.jpg); background-position:bottom !important;} #fourth{ background-color:#F16F73; padding:60px 0; color:#fff;} #fourth ul{ text-align:center;} #fourth ul li{ /*display:inline-block; */padding:0 0 0 40px; font-size:16px; background-repeat:no-repeat; background-position:left; text-align:left;} #fourth ul li.q{ background-image:url(../images/icon_q.png); margin:0 0 20px; background-position:left 5px;} #fourth ul li.a{background-image:url(../images/icon_a.png); background-position:left 5px;} p.morebtn { text-align:center;margin:40px 0 0; font-size:16px;} p.morebtn a{ display:block; color:#FBD1D1; text-decoration:none;} /*navigation*/ #bottom-navi{ width:100%; background:#444; padding:10px 0;} #bottom-navi ul{ text-align:center;} #bottom-navi ul li{ display:inline-block; margin:5px 20px;} #bottom-navi ul li.login a{ display:block; width:230px; padding:10px; box-sizing:border-box; background-color:#4374D7; color:#fff; border-radius:6px; box-shadow:2px 2px 2px #484848; text-align:center; text-decoration:none; font-size:16px; font-weight:bold;} #bottom-navi ul li.login a:hover{ background-color:#4F8AFF;} #bottom-navi ul li.entry a{ display:block; width:230px; padding:10px; box-sizing:border-box; background-color:#59D181; color:#fff; border-radius:6px; box-shadow:2px 2px 2px #484848; text-align:center; text-decoration:none; font-size:16px; font-weight:bold;} #bottom-navi ul li.entry a:hover{ background-color:#65ED93;} /* -------------------------------------------------- 共通下層ページ -------------------------------------------------- */ /*共通*/ #contents h2{ color:#002f6c;font-size: 1.6rem;line-height: 1.4;/*font-weight: bold;*/position: relative;text-align: center; /*background: #fff; *//*padding: 8% 2% 0;*/ /*box-shadow: 1px 1px 2px rgba(0,0,0,0.1);*/ font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight:700; font-style: normal;} #contents h2:after{ content: ''; width: 33px;display: block;margin: 8% 0 30px; margin: 15px auto 30px; border-radius: 6px; background-color:#ff7043; height: 6px;position: relative; bottom: -3px;} #contents h2 a.h2ttllink{display: block; text-align: center; width: 100%; font-size: 50%; color: #2C70C6; padding:0.5% 0 0; font-weight: normal;} #contents h2 a.h2ttllink:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f138"; margin-right: 4px; font-size: 90%; } #contents h2 .subttl{display: block; width: 100%; font-size: 70%; color: #2C70C6;} #contents .setting h3{ display:block; width:auto !important; padding:10px 0; margin:0 0 5px; background-size:cover; background-repeat:no-repeat; height:auto; line-height:100%; text-align:left;font-size:16px; text-shadow:none; color:#37474f;position: relative; padding-bottom: .3em;} #contents .setting h3.grp01{margin: 8% 0 4%;color:#074480; padding: 0; position: relative; font-size: 1.5em; font-weight: 600; text-align: center;} #contents .setting h3.subttl{margin: 0;background:#005bb2;color:#fff; padding: 3% 4%; position: relative; font-size: 1.0em; font-weight: normal;} #contents .setting h3.subttl:after{position: absolute;top: 50%;left:0.5em;transform:translateY(-50%);content: '';width: 6px;height:6px;background-color:white;} #contents .setting.bgc{background: rgba(97, 168, 237, 0.1);padding: 4% 4%;border-radius: 6px;} #contents .setting h2.subttl4 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em; background: none !important;box-shadow: none !important;} #contents .setting h2.subttl4 span {display:block; font-size:1.45em; letter-spacing:0; margin-top:0.4em; color:#222;} @media print, screen and (min-width : 884px) { #contents .setting h2.subttl4{width:100%; font-size:1.25em; margin-top:0; margin-bottom:4vw; text-align:center;letter-spacing: 0;} #contents .setting h2.subttl4 span{font-size:1.6em; margin-top: 2vw} } #contents .setting h2.subttl4::after {content: '';width: 33px;display: block;margin: 8% 0 30px;margin: 1% auto 2%;border-radius: 6px;background-color: #ff7043;height: 6px;position: relative;bottom: -3px;} #contents .setting h3.subttl2{font-size: 1.1em; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight:700; font-style: normal;} #contents .setting h3.subttl3{margin: 10% 0 2%;color:#074480; padding: 0; position: relative; font-size: 1.75em; font-weight: 600; text-align: center;} #contents dl.form01{ display:table; font-size:16px; width:100%; margin-bottom: 1vw;} #contents dl.form01 dt{ display:block; width:100%; text-align:left; padding:0 5px; box-sizing:border-box; vertical-align:middle; color:#37474f; font-weight:bold;} #contents dl.form01 dd{ display:block; width:100%; padding:5px; box-sizing:border-box; margin:0 0 10px;} /*エンタープライズお問い合わせ*/ #contents dl.form011{ display:table; font-size:16px; width:100%;} #contents dl.form011 dt{ display:block; width:100%; text-align:left; padding:0 5px; box-sizing:border-box; vertical-align:middle; color:#666; font-weight:bold;} #contents dl.form011 dd{ display:block; width:100%; padding:5px; box-sizing:border-box; margin:0 0 10px;} .hsu{ color:#D11B63; font-weight: bold; padding: 0 5px;} #contents dl.form011 dt:before{ content: '●'; font-size: 64%; color:#5498BF; margin-right: 0.8%; } #contents dl.form011 dd input,#contents dl.form011 dd textarea{ width:100% !important;} #contents input{width:100%; border: 1px solid #e0e0e0;border-radius: 1px; padding:2%; box-sizing:border-box; margin:0 0 5px;} #contents input.usernum{width:auto; height:auto; vertical-align:middle;} #contents input[type="checkbox"]{transform: scale(1.4);} #contents textarea{width:100%; height:10em; border: 1px solid #ccc;border-radius: 1px; padding:1%; box-sizing:border-box;} #contents .button a { display:block; background-color:#0d97ff; width:28vw; color:#fff; font-size:1.2rem; padding:2% 0; text-align:center; margin: 4vw auto;border: none; border-radius: 2px;text-decoration: none; background: -moz-linear-gradient(right, #1e88e5, ##0e84e5); background: -webkit-linear-gradient(right, #1e88e5, ##0e84e5); background: linear-gradient(to right, #1e88e5, ##0e84e5); } #contents .button a:hover {background-color:#fff;background: #fff; border: 1px solid #41adff; color: #41adff; cursor: pointer;} #contents .button a#btn_send {width:100%;} /*よくある質問*/ #contents .setting .faqpage{ /*margin: 6vw 0;*//*padding-top:16vw;*/} #contents .setting .faqpage h3{ /*margin: 2% 0;*/ font-size: 1.2em; /*margin-top:-16vw;*/ /*padding-top:6vw;*/} /*_::-webkit-full-page-media, _:future, :root #contents .setting .faqpage{ padding-top:16vw;} _::-webkit-full-page-media, _:future, :root #contents .setting .faqpage h3 { margin-top:-16vw; padding-top:16vw;}*/ #contents .setting .faqpage ul{ text-align:center;} #contents .setting .faqpage ul li{ display:block; padding:3% 4%; font-size:0.9em; text-align:left;} #contents .setting .faqpage ul li.q{ margin:0; background:#fff; color: #222;border-bottom: 1px solid rgba(204, 204, 204,0.8); position: relative;} #contents .setting .faqpage ul li.q:before{content: "Q"; margin-right: 10px; font-weight: 500; color: #0067b8;} #contents .setting .faqpage ul li.a{ background:rgba(255,255,255,0.3); padding:4%; color: #3f3e3e;border-bottom: 1px solid rgba(204, 204, 204,0.8);} #contents .setting .faqpage ul li.q:after{content:""; display:block; width:1em; height:0.5em; background-image:none; position:absolute; top:40%; right:2%;} #contents .setting .faqpage ul li.q.active:after{background-image:none;} #contents .setting .faqpage .mb60{ margin-bottom: 0 !important;} #contents .setting .faqcat{ margin: 0 0 4%;} #contents .setting .faqcat ul{justify-content: center; position: relative; z-index: 1;} #contents .setting .faqcat ul li{ display: flex; width:calc(94%/3); margin: 1% 1% 3%; text-align: center;/* min-height: 62px;*/} #contents .setting .faqcat ul li a{ display:grid; border:none; padding: 6% 12%; align-items: center; text-align: center; cursor: pointer; width: 100%; background:rgba(212, 232, 236,0.7); border-radius: 50px; font-feature-settings: "palt"; font-weight: 500; font-size: 0.9em;} #contents .setting .faqcat ul li a:hover{ background: rgba(0, 91, 178, 0.1);} #contents button{display:block; background-color:#0d97ff; width:48vw; color:#fff; font-size:4.2vw; padding:1.15em 0; text-align:center; margin: 4vw auto;border-radius: 2px;border: 1px solid #0d97ff;} #contents button:hover {background-color:#fff;background: #fff; border: 1px solid #0d97ff; color: #0d97ff;} #contents button.btn20{display:block; background-color:#737373; width:48vw; color:#fff; font-size:4.2vw; padding:1.15em 0; text-align:center; margin: 4vw auto; border-radius: 2px;border: 1px solid #737373;} #contents button.btn20:hover {background-color:#fff;background: #fff; border: 1px solid #737373; color: #737373;} /*マイページ*/ #contents .mypage input[type="text"]{ width:100%; border: 1px solid #e0e0e0; border-radius: 2px; height: 3em; padding:0 10px; box-sizing:border-box;} #contents .mypage input[type="submit"]{ width:auto; background-color:#26a69a;border-radius: 2px;box-sizing: border-box;color: #fff;text-align: center;text-decoration: none; padding: 3% 4%;border: 1px #26a69a solid;} #contents .mypage input[type="submit"]:hover{ background-color:#767676;border: 1px #767676 solid;} #contents .mypage input.btn_urlsend{ margin:5px 0 0; content: "\f14a";font-family: Font Awesome 5 free; font-weight: 900;} #contents .mypage .group-list{ padding:4%; margin:20px 0; background: #fff; box-shadow: 0px 0px 4px rgba(0,0,0,0.1);} #contents .mypage .group-list h4{ display: block; padding:3% 0; background: #fff; font-weight: normal; color: #37474f; margin-bottom: 2%; position: relative; cursor: pointer; font-size: 0.875em;border-bottom: 1px solid #dedede; line-height: 100%;} #contents .mypage .group-list h4:after {font-family: "Font Awesome 5 free"; content: "\f078"; color: #999;position: absolute; right: 0; font-size: 1.2em; bottom: 14%; font-weight: 900;} /*#contents .mypage .group-list h4 span:after {font-family: "Font Awesome 5 free"; content: "\f107"; font-size:16px;color: #fff;}*/ #contents .mypage .group-list h4 span{ vertical-align: middle;} #contents .mypage .group-list h4 span.m_num{ display: inline-block; width: 25%; text-align: center; background:#ededed; padding: 0.5% 2%; font-size: 0.75em; font-weight: 600; border-radius: 50px; margin-right: 1.5%; margin-bottom:2%;} #contents .mypage .group-list h4 span.u_name{ display: inline-block; width: 70%; color: #000 !important; position: relative; right: 0; font-weight: 600; font-size: 1.1em;margin-right: 1%; margin-bottom:2%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} #contents .mypage .group-list h4 span.u_name:after{ display: none;} #contents .mypage .group-list h4 span.u_email{ display: inline-block; width: 100%; margin-bottom: 2%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} #contents .mypage .group-list h4 span.seid{ display: inline-block; width:55%; font-weight: normal; color: #37474f;} #contents .mypage .group-list h4 span.user_del{position: absolute; right: 7%; width: 18%; text-align: center;} #contents .mypage .group-list h4 span.user_del:after{ display: none;} #contents .mypage .group-list h4 span.user_del input[type="checkbox"]{ width: auto; margin-right: 10%;transform: scale(1.0); margin-bottom: 0;} #contents .mypage .form01 .selectbox { position: relative; width: 100%; display: inline-block; } #contents .mypage .form01 select { margin: 0 2px 10px; -webkit-appearance: none; appearance: none; box-sizing: border-box; border: 1px solid #e0e0e0; background: #fff; border-radius: 2px; height: 3em; padding:0 10px; width: 100%; } #contents .mypage .form01 option {} #contents .mypage .form01 .selectbox:after { content: ""; display: block; width: 6px; height: 6px; position: absolute; right: 4%; top: 1.5em; border-bottom: #333 2px solid; border-right: #333 2px solid; transform: rotate(45deg) translateY(-30%); } /*マイページ　CSV DL*/ #contents .mypage .csvdl01 input[type="submit"]{ width: 100%; } #contents .mypage .csvdl01 input[type="checkbox"]{ width: auto; margin: 0 0.5% 0 2%;} #contents .mypage .csvdl01 span{ width: auto; font-size: 0.875em; color: #828282;} #contents .mypage .csvdl_inner{ padding:4%; margin:20px 0; background: #fff; box-shadow: 0px 0px 4px rgba(0,0,0,0.1);} #contents .mypage .csvdl_inner h4{ border-bottom: 1px solid #202121; margin-bottom: 4%; padding: 0 0 1%; font-size: 1.1em;} #contents .mypage .csvdl_inner .csvdl01 input[type="file"]{ border: none; padding: 2% 0;} #contents .mypage .csvdl_inner .csvdl01 input[type="submit"]{font-size: 0.875em;} /*マイページ　定型文管理*/ #contents .mypage .myage-teikeibox{background: #eee;padding: 2% 4%;border-radius: 4px;margin: 0 0 2vw;} #contents .mypage .myage-teikeibox form{display: block;/*display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content:space-between;*/} #contents .mypage .myage-teikeibox .grp_select05{width: 100%;} #contents .mypage .myage-teikeibox form input{ display: block;/*display: flex; align-items: center;*/} #contents .mypage .myage-teikeibox form input[type="text"]{ width: 98%;} #contents .mypage .myage-teikeibox form input[type="submit"]{ height: 3em; padding: 0 2%; width:100%;} #contents .mypage .myage-teikeibox form input[type="file"]{ border: none; padding: 2% 0 1%; display: inline-block; width: auto;margin-bottom: 0;} #contents .mypage .myage-teikeibox form .file_txt{ width: 60%; display: inline-block;} #contents .mypage .myage-teikeibox .grp_select05 .lead01{ display: block; width: 100%; color:#878787; font-size:0.875em;margin-bottom: 2%;} #contents .mypage .myage-teikeibox .g-select01 select,#contents .mypage .myage-teikeibox02 .g-select01 select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: 1px solid #e0e0e0; outline: none; background: #fff; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; } #contents .mypage .myage-teikeibox .g-select01 select::-ms-expand,#contents .mypage .myage-teikeibox02 .g-select01 select::-ms-expand { display: none; } #contents .mypage .myage-teikeibox .g-select01,#contents .mypage .myage-teikeibox02 .g-select01 { position: relative; border: none; border-radius: 4px; margin-bottom:2%; display: inline-block; width: 77%; } #contents .mypage .myage-teikeibox .g-select01 option,#contents .mypage .myage-teikeibox02 .g-select01 option{} #contents .mypage .myage-teikeibox .g-select01::before,#contents .mypage .myage-teikeibox02 .g-select01::before { position: absolute; top: 1.1em; right: 1.2em; padding: 0; content: ''; pointer-events: none; width: 6px; height: 6px; border-bottom: #666 2px solid; border-right: #666 2px solid; transform: rotate(45deg) /*translateY(-30%);*/ } #contents .mypage .myage-teikeibox .g-select01 select,#contents .mypage .myage-teikeibox02 .g-select01 select {padding: 8px 38px 8px 8px;} #contents .mypage .myage-teikeibox .s_gray_b,#contents .mypage .myage-teikeibox02 .s_gray_b {display: inline-block; width: auto;} #contents .mypage .myage-teikeibox02 form input[type="file"]{ border: none; padding: 2% 0; display: inline-block; width: auto;} #contents .mypage .myage-teikeibox02 form input[type="text"]{ width: 98%;} #contents .mypage .myage-teikeibox02 form .file_txt{ width: 100%; display: inline-block; margin-bottom: 8%; font-size: 0.875em;} #contents .mypage .myage-teikeibox02 form .file_txt .file_regi01{ padding: 2% 3%; background:#FF7588; color: #fff;} #contents .mypage .myage-teikeibox02 form .btn_update{ width: 100%;} #contents .mypage .myage-teikeibox02 form input[type="submit"]{ width: 100%;} #contents .mypage .myage-teikeibox02 .group-list .group-name form:nth-child(1){ margin: 0;} #contents .mypage .myage-teikeibox02 .group-list .group-name form:nth-child(1) input[type="submit"]{ margin: 0;} #contents .mypage .myage-teikeibox02 .group-list .group-name form:nth-child(2){position: relative;} #contents .mypage .myage-teikeibox02 .group-list .group-name form:nth-child(2) input[type="button"]{ padding: 2.8%; position: relative; left: 0; bottom: 0; margin-right: 0;} /*マイページ　グループ名追加*/ #contents .mypage .myage-groupbox form{display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content:space-between;} #contents .mypage .myage-groupbox form input:first-child{ margin-right: 1%;} #contents .mypage .myage-groupbox form input{ display: flex; align-items: center;} #contents .mypage .myage-groupbox form input[type="submit"]{ height: 3em; padding: 0 2%;} /*マイページ　グループ名保存*/ #contents .mypage .group-list .group-name form{display:block;} #contents .mypage .group-list .group-name form .gruop-name-class, #contents .mypage .group-list .group-name form .updggid-name{ width: 100%; margin-bottom: .5%; font-weight:500;} #contents .mypage .group-list .group-name form input:first-child{ margin-right: 1%;} #contents .mypage .group-list .group-name form input{ width: auto !important;} #contents .mypage .group-list .group-name form input[type="text"]{ width: 100% !important; margin-bottom: 4%;} #contents .mypage .group-list .group-name form select{ width: 100% !important;border: 1px solid #e0e0e0; padding: 1%; margin-bottom: 4%; height: 3em;} #contents .mypage .group-list .group-name form [type="checkbox"]{ width: auto !important; margin:0 0.5%; display: inline-block; width: 5%; vertical-align: middle;} #contents .mypage .group-list .group-name form .mojichk-name{width:92% !important; display: inline-block; vertical-align: middle;} #contents .mypage .group-list .group-name form .recchk-name{width:92% !important; display: inline-block; vertical-align: middle;} /*マイページ　メンバーリスト*/ #contents .mypage .group-list dl{ padding:0; margin: 0;} #contents .mypage .group-list h3{ margin-bottom: 1%; color:#074480; font-size: 1.2em;} #contents .mypage .group-list h3.grp01{margin: 0 0 1%; color: #074480; font-size: 1.2em; text-align: left;} #contents .mypage .group-list h3.grp01 a{cursor: pointer; margin: 1% 0; display: block; width: 100%; font-size: 0.875em; line-height: 1.3em; padding-left: 1%} #contents .mypage .group-list h3.grp01 a:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f3c5"; margin-right:0.4%; font-size: 90%;} #contents .mypage .group-list h3.grp01 a:first-child{ margin-top: 4%;} #contents .mypage .group-list h3.grp01 a:last-child{ margin-bottom: 4%;} #contents .mypage .group-list h3.mmb01:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f067"; margin-left:0.5em;} #contents .mypage .group-list .m_list_wrap{ background:#fafafa; margin: 0 0 3%;} #contents .mypage .group-list dt{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start; align-items: center; margin: 0;padding: 1% 3%; } #contents .mypage .group-list dt .reflect_name{ width: 100%; display: inline-block; margin: 0 1%; line-height: 2.5em;} #contents .mypage .group-list .m_list_wrap dt .m_li_m{ display: flex; align-items: center; font-size: 0.875em; font-weight: 600;} #contents .mypage .group-list .m_list_wrap dt input{ width: 100%; align-items: center; margin: 0 0 2% 0; background: #fff;} #contents .mypage .group-list .m_list_wrap dt input.btn_update{ /*width: 66%;*/width: 100%;align-items: center; background:#26a69a; margin: 0 auto;} #contents .mypage .group-list .m_list_wrap dd{ padding: 1% 2%;} #contents .mypage .group-list .m_list_wrap dd input.btn_update,#contents .mypage .group-list .m_list_wrap input.btn_update{ display: block; width: 100%; margin: 0 0 0 auto; /*padding:4% 0;*/ background:none; border: none;} #contents .mypage .group-list .m_list_wrap dd input.btn_urlsend{ display: block; /*width: 84%;*/ width: 100%;margin: 1% auto;} /*#contents .mypage .group-list .m_list_wrap .set_btm_wrap{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;padding: 0; margin: 8% 0; }*/ #contents .mypage .group-list .m_list_wrap .set_btm_wrap{display: block; padding: 0; margin: 4% 0; } /*#contents .mypage .group-list .m_list_wrap .set_btm_wrap form:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f2ed"; margin-right:0;}*/ #contents .mypage .group-list .m_list_wrap .set_btm_wrap form{ width: auto; display: flex; align-items: center; margin: 1% auto; color: #ab3e57;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt{ width: 94%; align-items: center; display: block; text-align: left; background:#eee; border-radius: 0px; padding: 4%; font-size: 0.875em; margin: auto;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap form .btn_update{ text-align: center;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt h4{ background: none; border-bottom: 1px solid;color:#202121; font-weight: 600; padding:0 0 1% 0;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt h4:after{display: none;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt .idpw01{ display: inline-block;padding: 0.3% 2%; margin:1% 2% 1% 0; font-size: 0.875em; background:rgba(38, 55, 104,.1); font-weight: normal; text-align: center; width: 25%;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt .idpw02{ margin-right: 4%; width: 60%; display: inline-block; font-weight: 600; font-size: 1.2em;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt input[type="submit"]{ width: auto; margin: 1% auto; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";} /*--他グループへの参加--*/ #contents .mypage .group-list .m_list_wrap dd .set__txt_other{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start; align-items:stretch; width: 100%; margin: -1px 0 0; border: 1px solid #ccc; font-size: 90%; color: #333; text-align: center; background: rgba(255,255,255,.98);} #contents .mypage .group-list .m_list_wrap dd .other_joined_label{ display: flex; align-items: center; width: 25%; padding: 1% 0.5%; background: #e8e4e2; font-size: 80%;} #contents .mypage .group-list .m_list_wrap dd .other_joined_div{ display: block; align-items: center; width: 75%; text-align: left; padding:2% 2%;background: rgba(255,255,2555,0.98);} #contents .mypage .group-list .m_list_wrap dd .other_joined,#contents .mypage .group-list .m_list_wrap dd .other_join{ display: block; width: 100%; text-align: left; padding: 0.5%;} #contents .mypage .group-list .m_list_wrap dd .other_joined_div .doji_on01{ padding: 0.5% 2%; background: #26cf8e; color: #fff; border-radius: 50px; margin: 0 1%; font-size: 0.875em;} #contents .mypage .group-list .m_list_wrap dd .other_joined_div .doji_off01{ padding: 0.5% 2%; background: #E2E3E7; border-radius: 50px; margin: 0 1%; font-size: 0.875em;} #contents .mypage .group-list .m_list_wrap dd .other_joined_div .joined_on01{ padding: 0.5% 2%; background: #26cf8e; color: #fff; border-radius: 50px; margin: 0 1%; font-size: 0.875em;} #contents .mypage .group-list .m_list_wrap dd .other_joined_div .joined_off01{ padding: 0.5% 2%; background: #E2E3E7; border-radius: 50px; margin: 0 1%; font-size: 0.875em;} /*このメンバーを削除ボタン*/ #contents .mypage .group-list .m_list_wrap dd .u_delete_btn01{color: #ab3e57; width: 20%; margin: 3% auto 2%; display: flex; justify-content: center; align-items: center;} #contents .mypage .group-list .m_list_wrap dd .u_delete_btn01 input[type="button"]{color: #ab3e57; width: auto; margin: 0 auto;} #contents .mypage .group-list .m_list_wrap dd .u_delete_btn01:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f2ed"; margin-right:0;color: #ab3e57;} #contents .mypage .group-list .m_list_wrap dt input[type="checkbox"]{ width: auto;} #contents .mypage .group-list .m_list_wrap dt span{ display: inline; padding: 1%; width: auto;} #contents .mypage .btn_select_del02{ display: block; margin: 2% 0 2% 0; width: 100%; padding: 1.5% 3%;} /*マイページ　メンバー追加*/ #contents .mypage .group-list .mmb_add{ margin: 2% 0 0;} #contents .mypage .group-list .mmb_add .mmb_add_inr{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start; margin: 0;padding: 1% 2%;} #contents .mypage .group-list .mmb_add .mmb_add_inr .m_li_m{ display: flex; align-items: center; font-size: 0.875em; font-weight: 600;} #contents .mypage .group-list .mmb_add .mmb_add_inr input{ width: 100%;align-items: center; margin: 0 0 2% 0; background: #fff;} #contents .mypage .group-list .mmb_add .mmb_add_inr input[type="submit"]{ /*width: 10%;*/ width: 100%; align-items: center; background:#26a69a} #contents .mypage .group-list .mmb_add .mmb_add_inr input[type="submit"]:hover{background:#767676; border: 1px solid #767676;} #contents .mypage .mmb_add h3{ border-bottom: 1px solid #202121; padding: 0 0 2%; margin: 2% 0;} /*マイページ　ユーザ管理*/ #contents .mypage .umanage_form01{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start; margin: 0;padding: 4% 0;} #contents .mypage .umanage_form01 .s_gray_b{ display: flex; align-items: center; font-size: 0.875em; font-weight: 600;} #contents .mypage .umanage_form01 input{ width: 100%;align-items: center; margin: 0 0 2% 0; background: #fff;} #contents .mypage .umanage_form01 input[type="submit"]{ /*width: 10%;*/ width: 100%; align-items: center; background:#26a69a; margin: 2% 0 0;} #contents .mypage .umanage_form01 input[type="submit"]:hover{background:#767676; border: 1px solid #767676;} #contents .mypage .umanage_form01 input::placeholder {font-size: 0.875em; color: #888;} #contents .mypage .csvdl_area01{display:block; margin: 8% 0;padding: 0;} #contents .mypage .csvdl_area01 .csvdl01{ width: 100%;} /*マイページ　端末情報一覧*/ #contents .mypage .device_wrap01{ width:inherit; overflow-x: auto; white-space: nowrap;padding:2%; margin:20px 0; background: #fff; box-shadow: 0px 0px 4px rgba(0,0,0,0.1);} #contents .mypage .device_list_wrap{ width: 1000px;} #contents .mypage .device_list01{display: flex; width: 100%; overflow-x: scroll;} #contents .mypage .device_list01 li{ list-style: none; width: calc(100%/7); box-sizing: border-box; text-align: center; border-bottom: 1px solid #dedede; padding: 2% 0; font-size: 0.875em;} #contents .mypage .device_list01.komoku{ font-weight: 600; background: #ededed;} #contents .mypage .device_list01 .joined01{ display: block; width: 100%; border-radius: 1px; padding: 2%; background: #26cf8e; color: #fff; text-align: center;} /*マイページ　メッセージ管理*/ #contents .mypage .btn_select_del{ display: block; margin: 0 0 2% auto;} #contents .mypage .mypagebox{padding:4%; margin:0 0 4%; background: rgba(0, 91, 178, 0.1);} #contents .mypage .mypagebox span{ font-size:14px; color:#002f6c; width:100%; display:block; font-weight: 600; margin: .2em 0;} #contents .mypage .mypagebox span#total_price{ display:inline; color:#666;} #contents .mypage .mypagebox span#total_price_tax{ display:inline; color:#666;} #contents .mypage .mypagebox .joined01{ display: inline-block; width: auto; border-radius: 1px; padding: .4% 1.4%; background: #26cf8e; color: #fff; text-align: center; margin: 0 .5%} /*マイページ　メニューリスト*/ #contents .mypage .mypagemenu{ margin:0 auto 20px; /*width:95%;*/ width:100%;} #contents .mypage .mypagemenu-list{ display:block;text-align:center;} #contents .mypage .mypagemenu-list li{ display:block; margin:0 0 1px;} #contents .mypage .mypagemenu-list li br{ display:none;} #contents .mypage .mypagemenu-list li a{ display:block; margin:0; background-color:#50C7C6; padding:2%; color:#fff; text-decoration:none;} #contents .mypage .mypagemenu-list li a:hover{ background-color:#4374d7;text-decoration:none;} #contents .mypage .myage-groupbox{ text-align:center; margin:0 0 40px; overflow:hidden;} /*マイページ　サブメニューリスト*/ #contents .mypage .sub_menu{ margin:0 auto 2%;width:100%;} #contents .mypage .sub_menu-list{text-align:center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;width: 80%; margin: auto;} #contents .mypage .sub_menu-list li{ display:block; margin:0 0 1px; width: calc(100%/2);} #contents .mypage .sub_menu-list li br{ display:none;} #contents .mypage .sub_menu-list li a{ display:flex; margin:0; padding:2%; color:#0d97ff; text-decoration:none; background: none !important; font-weight: 600;} #contents .mypage .sub_menu-list li a:hover{ color:#4374d7;text-decoration:none;} #contents .mypage .sub_menu-list li a:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f138"; margin-right:4px; font-size: 90%;} /*マイページ　現在のご利用状況*/ #contents .mypage .current_usage01{ margin: 4% 0 4%; padding:4%; margin:20px 0; background: #fff; box-shadow: 0px 0px 4px rgba(0,0,0,0.1);} #contents .mypage .current_usage01 dt{ padding: 3% 3%; background:rgba(7, 68, 128,0.11) ; color: #002f6c; font-weight: 600; letter-spacing: .1em; font-size: 0.95em; } #contents .mypage .current_usage01 dt:before{ content: "●"; margin-right: 1%;} #contents .mypage .current_usage01 dd{padding: 4% 4% 4% 6%;background: rgba(255,255,255,1.0); font-size: 1.1em; color:#282929;} #contents .mypage .current_usage01 dd .uchiwake{} #contents .mypage .current_usage01 dd .uchiwake h4{ font-size: .75em;padding: .1% 2%; background:#e8e4e2; color: #666; margin: 1% 0 1% 0; width: 20%; border-radius: 10px; text-align: center; font-weight: 400; letter-spacing: .2em;} #contents .mypage .current_usage01 dd .uchiwake li{ padding: 0 0 .2% 1%; font-size: 0.875em;} #contents .mypage .current_usage01 dd .uchiwake li:before{ content: "・"; margin-right: .5%;} /*お知らせ*/ #contents .setting .newslist{ font-size:16px; margin:0 0 3%;} #contents .setting .newslist dt{ padding:2%; border-bottom:1px solid rgba(204,204,204,0.6); border-radius:0; color: #222; background: #fff; font-weight:500; margin:0;} #contents .setting .newslist dt i{ display: none; float:right; margin:0 10px 0 0; font-size:16px;} #contents .setting .newslist dt span{ padding:.4% 1%; color: #fff; background-color: #005bb2; margin:0 10px 0 0;font-weight:normal; font-size:12px; border-radius: 50px;} #contents .setting .newslist dd{ background:rgba(255,255,255,0.8); padding:3% 2%; color: #3f3e3e;} /*運営者*/ #contents .company dl{ font-size:15px;} #contents .company dl dt{ padding:10px; /*background-color:#005bb2;*/ color: #000; font-weight:600; margin:0;border-radius:0; border-bottom: 1px solid rgba(204, 204, 204,0.8);} #contents .company dl dd{padding:10px; margin:0 0 10px;} /*サービスご利用の流れ3*/ #contents .service-flow03{ margin: 2% 0 4%;} #contents .service-flow03 li a{ display: block; width: 100%; margin: 0 0 2%; color:#37474f;padding:3% 8% 3% 2%;font-size: 1em;text-align: left;position: relative; background: #fff;/* box-shadow: 0 4px 0 rgba(0,0,0,0.1);*/} #contents .service-flow03 li a:hover{/*background: rgba(233, 246, 251, 0.9);*/ background:#45556C; color: #fff;} #contents .service-flow03 li a:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f105"; position: absolute; top:6%; right: 2%; color: #005bb2; font-size: 160%;} #contents .service-flow03 li a .goguide{ display: none;} #contents .service-flow03 h4{ font-weight: 600; margin:3% .6% .6%; font-size: 0.95em;} /*サービスご利用の流れ　吹き出し*/ #contents .sf_bln {position: relative;width: 100%;margin: 2% 0 6%; padding: 0;background: #fff;box-shadow: 0 4px 0 rgba(0,0,0,0.1);} #contents .sf_bln:before,#contents .sf_bln:after { /* 三角 */ content: ''; border: 14px solid transparent; position: absolute; left: 50%; margin-left: -14px; } #contents .sf_bln:before { /* 線になる部分 */ border-top-color: rgba(0,0,0,0.1); /* 吹き出しの線の色と同じ色 */ bottom: -32px; } #contents .sf_bln:after { /* 地の部分 */ border-top-color: #fff; /* 吹き出しの背景色と同じ色 */ bottom: -27px; } #contents .sf_bln:last-of-type:before,#contents .sf_bln:last-of-type:after {content: none;} #contents .sf_bln:hover:after{border-top-color: rgba(233, 246, 251, 1);} #contents .sf_bln:last-child {margin: 2% 0 6%;} #contents .sf_bln a{ width: 100%; font-size: 1em;text-align: left; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start; align-items: center; margin: 0;padding: 3% 2%; color:#37474f;} #contents .sf_bln a:hover{background: rgba(233, 246, 251,0.9);} #contents .sf_bln a:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f105"; position: absolute; right: 2%; color: #005bb2; font-size: 160%;} #contents .sf_bln a .goguide{ display: none; visibility: visible; border-radius: 50px; color:#fff; font-size: 80%; padding: 0.5% 3% 0.5% 2%; position: absolute; right: 2%; background:#45556C;} #contents .sf_bln a .stpp{ display: block; padding: 1% 4%; color: #fff; font-size: 80%; font-weight: normal; margin: 0 auto 4%;} #contents .sf_bln a .step1{ background:#61A8ED;} #contents .sf_bln a .step2{ background:#508DDD;} #contents .sf_bln a .step3{ background:#3E73CE;} #contents .sf_bln a .stptit{ display: block; width: 100%; font-weight: 700; text-align: center;} /*サービスご利用の流れ*/ #contents dl.service-flow{ margin:0 0 2%;} #contents dl.service-flow dt{margin: 0; background:#005bb2; color:#fff; box-shadow: 2px 2px 3px rgba(0,0,0,0.1);padding:3% 3%;font-size: 1em;font-weight: bold; text-align: center;} #contents dl.service-flow dt span.step{ font-size:16px; margin:0 1% 0 0; font-weight: bold;} #contents dl.service-flow dt span.number{ font-size:24px; font-weight: bold;margin-right:2%;} #contents dl.service-flow dd{ background: #fff; padding: 4%; font-weight:normal; position: relative; box-shadow: 1px 1px 2px rgba(0,0,0,0.1);} #contents dl.service-flow:after{ display: block; content:"↓"; color: #fff; position:relative; bottom:10px; left:44%; line-height:1; font-size: 1.8em; background: #00bfa5; border-radius: 50%; width: 7.4%; height: 4%; text-align: center; padding: 0.8% 1.4% 1% 1.4%;} #contents dl.service-flow:nth-last-child(1):after{content: none;} #contents dl.service-flow:last-of-type:after{ display: none; content: none;} #contents dl.service-flow dd figure{width: 30%;} #contents dl.service-flow dd .txt01{width: 65%;} #contents dl.service-flow dd.dd02 figure{width: 40%; display: flex !important;} #contents dl.service-flow dd.dd02 .txt01{width: 55%;} #contents dl.service-flow dd.dd02 figure figcaption{text-align: center;} #contents dl.service-flow dd.dd02 figure .dd022{ margin: 0 1% 0 0;} /*----------使い方ガイド2025----------*/ .gde_wrap{ display: block;background: #fff; margin-bottom: 4%;} .gde_wrap .gdetail_side{ width: 100%; padding: 4%;} .gde_wrap .service-flow{ width: 100%;} .gde_wrap .gdetail_side h4{ display: block;background:#45556C; color:#fff; padding: 6%; text-align: center; font-weight: 600; border-radius: 4px 4px 0 0 ;} .gde_wrap .gdetail_side ul{ border: 1px solid rgba(229, 231, 235,0.9); padding:0 4%; margin-bottom: 4%;} .gde_wrap .gdetail_side ul li{border-bottom: 1px solid rgba(229, 231, 235,0.9); padding:4%;} .gde_wrap .gdetail_side ul li a{ display: block; padding: 3% 0; color:#222; font-size: 0.9em;} .gde_wrap .gdetail_side ul li a:hover{ color: #1e88e5;background: rgba(97, 168, 237, 0.1);} .gde_wrap .gdetail_side ul li:last-child{border-bottom:none;} .gde_wrap .service-flow dd{box-shadow: none !important; padding: 4% 0 !important;} .gde_wrap .service-flow dd .onecl .clmbox{width: 90% !important; margin-bottom: 6% !important; padding-top:60px; margin-top: -60px; } .gde_wrap .service-flow dd .onecl .clmbox:first-child{padding-top:0px; margin-top: 0px;} .gde_wrap .service-flow dd .onecl .clmbox h3{display: block;width: 100% !important; margin: 0 !important; color: #45556C !important; font-size:1.25em !important; border-bottom: 1px solid rgba(69, 85, 108,0.7); padding: 2% 0 !important; font-weight: 600;} .gde_wrap .service-flow dd .onecl .clmbox h3.begin{display: block;width: 100% !important;color: #45556C !important; font-size:1.25em !important; border-bottom: none; padding: 2% 8% !important; font-weight: 600;background: rgba(97, 168, 237, 0.1);border: 1px solid rgba(69, 85, 108,0.5); margin:0 0 4% 0 !important; text-align: center;} .gde_wrap .service-flow dd .onecl .clmbox .txt01{ padding: 0 !important; line-height: 180%;} @media screen and (min-width : 768px) { .gde_wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; background: #fff;} .gde_wrap .gdetail_side{ width: 29%; padding: 4% 2%;} .gde_wrap .service-flow{ width: 70%;} .gde_wrap .gdetail_side h4{ display: block;background:#45556C; color:#fff; padding: 6%; text-align: center; font-weight: 600; border-radius: 4px 4px 0 0 ;} .gde_wrap .gdetail_side ul{ border: 1px solid rgba(229, 231, 235,0.9); padding:0 4%;} .gde_wrap .gdetail_side ul li{border-bottom: 1px solid rgba(229, 231, 235,0.9); padding:4%;} .gde_wrap .gdetail_side ul li a{ display: block; padding: 3% 8%; color:#222; font-size: 0.9em;} .gde_wrap .gdetail_side ul li a:hover{ color: #1e88e5;background: rgba(97, 168, 237, 0.1);} .gde_wrap .gdetail_side ul li:last-child a{border-bottom:none;} .gde_wrap .service-flow dd{box-shadow: none !important; padding: 4% 0 !important;} .gde_wrap .service-flow dd .onecl .clmbox{width: 80% !important; margin-bottom: 6% !important; padding-top:100px; margin-top: -100px; } .gde_wrap .service-flow dd .onecl .clmbox:first-child{padding-top:0px; margin-top: 0px; } .gde_wrap .service-flow dd .onecl .clmbox h3{display: block;width: 100% !important; margin: 0 !important; color: #45556C !important; font-size:1.25em !important; border-bottom: 1px solid rgba(69, 85, 108,0.7); padding: 2% 0 !important; font-weight: 600;} .gde_wrap .service-flow dd .onecl .clmbox .txt01{ padding: 0 !important; line-height: 180%; } } /*----------//使い方ガイド2025----------*/ .forbuy_btn01{margin: 4% auto 6%;width: 94%;} .forbuy_btn01 a{ width: 100%; border-radius: 50px; position: relative; display: block; padding: 3% 0.5em; font-weight: normal; color: #fff; text-align: center; text-decoration: none; transition: all .3s; background: #E85153; border: none; font-size: 0.95em; } .forbuy_btn01 a:hover{background: rgba(232, 81, 83,0.7)} .forbuy_btn01 a:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; position: absolute; right: 4%; } /*ステップバー1*/ .stepBar { position: relative; list-style: none; margin: 0 auto 2em; padding: 0; text-align: center; width: 100%; overflow: hidden; *zoom: 1; font-size:.8em; } .stepBar .step { position: relative; float: left; display: inline-block; line-height: 1.4; background-color: #eee; color:#888; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .stepBar .step:before, .stepBar .step:after { position: absolute; left: -15px; display: block; content: ''; background-color: #eee; border-left: 4px solid #FFF; width: 30px; height: 23px; } .stepBar .step:after { top: 0; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .stepBar .step:before { bottom: 0; -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); } .stepBar .step:first-child{ /* -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;*/ } .stepBar .step:first-child:before, .stepBar .step:first-child:after { content: none; } .stepBar .step:last-child{ /* -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;*/ } .stepBar .step.current1 { color: #FFF; background-color: #61A8ED;width: 37%; padding: 5px 20px 5px 10px;} .stepBar .step.current2 { color: #FFF; background-color: #508DDD;width: 33%; padding: 5px 20px 5px 0px;} .stepBar .step.current3 { color: #FFF; background-color: #3E73CE;width: 30%; padding: 5px 20px 5px 10px;} .stepBar .step.current1:before, .stepBar .step.current1:after {background-color: #61A8ED;} .stepBar .step.current2:before, .stepBar .step.current2:after {background-color: #508DDD;} .stepBar .step.current3:before, .stepBar .step.current3:after {background-color: #3E73CE;} /* ステップバー2 */ .stepBar2 { position: relative; list-style: none; margin: 0 auto 1em; padding: 0; text-align: center; width: 95%; overflow: hidden; *zoom: 1; font-size:.8em; } .stepBar2 .step2 { position: relative; float: left; display: inline-block; line-height: 1.4; padding: 5px 40px 5px 20px; background-color: #eee; color:#888; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .stepBar2 .step2:before, .stepBar2 .step2:after { position: absolute; left: -15px; display: block; content: ''; background-color: #eee; border-left: 4px solid #FFF; width: 25px; height: 23px; } .stepBar2 .step2:after { top: 0; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .stepBar2 .step2:before { bottom: 0; -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); } .stepBar2 .step2:first-child{ -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .stepBar2 .step2:first-child:before, .stepBar .step2:first-child:after { content: none; } .stepBar2 .step2:last-child{ -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .stepBar2 .step2.current { color: #FFF; background-color: #35477d; } .stepBar2 .step2.current:before, .stepBar2 .step2.current:after { background-color: #35477d; } .stepBar2.step44 .step2 { width: 48%; } /*ガイド　タイトル*/ .ttl_guide{display: block; width: 50%; margin: 0 auto 1%; background: #002f6c; color: #fff; padding: 1%; border-radius: 50px; font-size:1.0rem;} .ttl_guide_planname{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:center; justify-content:center; width: 100%; margin: 1% auto;} .ttl_guide_planname li{ width: auto;font-size:0.75rem; font-weight: normal; color: #fff; padding: 1% 4%; border-radius: 50px; margin: 0 .5%;} .plan_m{background: #50C7C6;} .plan_a{background: #75CFEE;} .plan_o{background: #F9CC50;} /*ガイド　リード分*/ .gde_lead_mng{ background: rgba(0, 91, 178, 0.1); color: #002f6c; padding: 4%; font-size:0.95rem; width: 100%; margin: 4% auto;} .gde_lead_mng_box{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between; margin: 2% 0 0;} .gde_lead_mng_box li{ width: 100%; padding: 2%; margin: 0 0 2%; border: 1px solid #002f6c; font-size:0.85rem; } .gde_lead_mng_box li:nth-last-of-type{ margin-bottom: 0;} .gde_lead_mng_box p{ margin: 0 0 3%; } .ttl_guide_planname2{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start;margin: 1% auto 2%;} .ttl_guide_planname2 li{ min-width: 40%; max-width: 45%; margin: 0 1% 0 0; font-size:0.75rem; font-weight: normal; color: #fff; padding: 1% 4%; border-radius: 50px; border: none; text-align: center;} /*ガイド　1カラム*/ #contents dl.service-flow dd.onecl figure{width: 100%; justify-content: center; align-items: center; margin: 2% auto; text-align: center;} #contents dl.service-flow dd.onecl .txt01{width: 100%; text-align: center;} #contents dl.service-flow dd.onecl figure .fig1,#contents dl.service-flow dd.onecl figure .fig2{width: calc(92%/2);} #contents dl.service-flow dd.onecl figure .fig2 img{width: 90%; height: auto; margin: 6% 0;} #contents dl.service-flow dd.onecl figure.fig0{width: 50%; height: auto; margin: 0 auto;} /*ガイド　1カラム 50％*/ #contents dl.service-flow dd .onecl .clmbox{width:100%;margin: 0 auto;} #contents dl.service-flow dd .onecl .clmbox h3{text-shadow: none; color: #333; font-size: 1.2rem; height: auto; line-height: 150%; margin: 0 auto; padding:4% 0 0; width: 70%; display: block; position: relative;} #contents dl.service-flow dd .onecl .clmbox figure{width: 80%; margin: 0 auto; padding: 4%; text-align: center; align-items: baseline;} #contents dl.service-flow dd .onecl .clmbox figure img{ margin: 0 auto 1%;} #contents dl.service-flow dd .onecl .clmbox .txt01{width: 100%; padding: 0 4% 4%;} #contents dl.service-flow dd .onecl .clmbox .txt01 h3{ text-shadow: none; color: #333; font-size: 1.2rem; width: auto; height: auto; line-height: 200%;} #contents dl.service-flow dd .onecl .clmbox .txt01 p{ margin-bottom: 2%;} /*ガイド　2カラム ddにclass*/ #contents dl.service-flow dd.twocl{display:block; padding: 1% 0 0;} #contents dl.service-flow dd.twocl .clmbox{width: 100%; margin: 0 auto;position: relative;} #contents dl.service-flow dd.twocl .clmbox h3{text-shadow: none; color: #333; font-size: 1.2rem; height: auto; line-height: 150%; margin: 0 auto; padding:4% 0 0; width: 77%; display: block; position: relative;} #contents dl.service-flow dd.twocl .clmbox h3 .ptn01{display: inline-block;background:rgba(92, 125, 237,1); color: #fff; font-size: 0.65em; height: auto !important; padding: 0.1% 4%; font-weight: normal; width: auto; margin: 0 2% auto 0; border-radius: 50px;} #contents dl.service-flow dd.twocl .clmbox h3 .ptn02{display: inline-block; background:rgba(2, 110, 170,1); color: #fff; font-size: 0.65em; height: auto !important; padding: 0.1% 4%; font-weight: normal; width: auto; margin: 0 2% auto 0; border-radius: 50px;} #contents dl.service-flow dd.twocl .clmbox figure{width: 80%; margin: 0 auto; padding: 4%; text-align: center;} #contents dl.service-flow dd.twocl .clmbox figure img{ margin: 0 auto 1%;} #contents dl.service-flow dd.twocl .clmbox .txt01{width: 100%; padding: 0 4% 4%;} #contents dl.service-flow dd.twocl .clmbox .txt01 h3{ text-shadow: none; color: #333; font-size: 1.2rem; width: auto; height: auto; line-height: 200%;} #contents dl.service-flow dd.twocl .clmbox .txt01 p{ margin-bottom: 2%;} #contents dl.service-flow dd.twocl .clmbox.stp1:before{content: "1";} #contents dl.service-flow dd.twocl .clmbox.stp2:before{content: "2";} #contents dl.service-flow dd.twocl .clmbox.stp3:before{content: "3";} #contents dl.service-flow dd.twocl .clmbox.stp4:before{content: "4";} #contents dl.service-flow dd.twocl .clmbox.stp5:before{content: "5";} #contents dl.service-flow dd.twocl .clmbox.stp6:before{content: "6";} #contents dl.service-flow dd.twocl .clmbox.stp7:before{content: "7";} #contents dl.service-flow dd.twocl .clmbox.stp8:before{content: "8";} #contents dl.service-flow dd.twocl .clmbox.stp9:before{content: "9";} #contents dl.service-flow dd.twocl .clmbox.stp10:before{content: "10";} #contents dl.service-flow dd.twocl .clmbox.stp11:before{content: "11";} #contents dl.service-flow dd.twocl .clmbox.stp12:before{content: "12";} #contents dl.service-flow dd.twocl .clmbox.stp13:before{content: "13";} #contents dl.service-flow dd.twocl .clmbox.stp14:before{content: "14";} #contents dl.service-flow dd.twocl .clmbox.stp15:before{content: "15";} #contents dl.service-flow dd.twocl .clmbox.stp16:before{content: "16";} #contents dl.service-flow dd.twocl .clmbox.stp17:before{content: "17";} #contents dl.service-flow dd.twocl .clmbox.stp18:before{content: "18";} #contents dl.service-flow dd.twocl .clmbox.stp19:before{content: "19";} #contents dl.service-flow dd.twocl .clmbox.stp20:before{content: "20";} #contents dl.service-flow dd.twocl .clmbox.stpp:before{position: absolute; left: 0; top: 0;background: #505050; color: #fff; padding: 3% 4.6%; font-weight: bold; background:linear-gradient(135deg, #505050 50%, #5c5c5c 50%); font-size: 1.2em;} /*ガイド　2カラム divnなどにclass*/ #contents dl.service-flow dd .twocl{display:block; padding: 1% 0 0;} #contents dl.service-flow dd .twocl .clmbox{width: 100%; margin: 0 auto;position: relative;} #contents dl.service-flow dd .twocl .clmbox h3{text-shadow: none; color: #333; font-size: 1.2rem; height: auto; line-height: 150%; margin: 0 auto; padding:4% 0 0; width: 70%; display: block; position: relative;} #contents dl.service-flow dd .twocl .clmbox figure{width: 80%; margin: 0 auto; padding: 4%; text-align: center;} #contents dl.service-flow dd .twocl .clmbox figure img{ margin: 0 auto 1%;} #contents dl.service-flow dd .twocl .clmbox .txt01{width: 100%; padding: 0 4% 4%;} #contents dl.service-flow dd .twocl .clmbox .txt01 h3{ text-shadow: none; color: #333; font-size: 1.2rem; width: auto; height: auto; line-height: 200%;} #contents dl.service-flow dd .twocl .clmbox .txt01 p{ margin-bottom: 2%;} #contents dl.service-flow dd .twocl .clmbox.stp1:before{content: "1";} #contents dl.service-flow dd .twocl .clmbox.stp2:before{content: "2";} #contents dl.service-flow dd .twocl .clmbox.stp3:before{content: "3";} #contents dl.service-flow dd .twocl .clmbox.stp4:before{content: "4";} #contents dl.service-flow dd .twocl .clmbox.stpp:before{position: absolute; left: 0; top: 0;background: #505050; color: #fff; padding: 3% 4.6%; font-weight: bold; background:linear-gradient(135deg, #505050 50%, #5c5c5c 50%); font-size: 1.2em;} /*ガイド　フォント*/ #contents dl.service-flow .tt_g90{ font-size: 90%; color: #686868;} #contents dl.service-flow .tt_g90_rd{ display: block; width: 80%; margin: 4% auto; color: #fff; font-size: 90%; background: #45556C;; border-radius: 30px; padding: 1% 4%;} #contents dl.service-flow .tt_g90_2{ font-size: 90%; color: #a9a9a9; margin: 1% 0;} #contents dl.service-flow .tt_g90_bg{ font-size: 88%; margin: 2% 0; padding: 3%; background: #f2f2f2;color: #686868;} #contents dl.service-flow .tt_g90_bg a.blank:after{font-family: 'Font Awesome 5 free'; content:"\f35d";margin-left:8px; color: #2698ed; font-size: 0.8em; font-weight: 900;} .gde_lead_mng.center a{ text-decoration: none;} /*ガイド　ボトムナビ*/ .guide_btmnavi{ margin: 0 auto 8vw;} /*Information*/ p.message01{ display:block; text-align:center; padding:20px; font-size:16px;} p.message01 a{background-color: #4374d7;border-radius: 0;/*box-shadow: 2px 2px 2px #484848;*/box-sizing: border-box;color: #fff;display: block;font-size: 16px;font-weight: 500;margin: 30px auto;padding: 10px;text-align: center;text-decoration: none;width: 230px;} p.message01 a:hover { background-color:#4F8AFF;} p.message01 a.helpbtn01{background-color: #4374d7;border-radius: 6px;box-shadow: 2px 2px 2px #484848;box-sizing: border-box;color: #fff;display: block;font-size: 18px;font-weight: bold;margin: 10px auto;padding: 10px;text-align: center;text-decoration: none;width: 230px;} /*help*/ .help{ margin:0;} .help li{ display:block; width:95%; padding:20px; box-sizing:border-box; background-color: #dacccd; border-radius: 6px; margin:0 auto 30px;} .help li img{ width:100%; height:auto;} .help li h4{ display:block; font-size:21px; margin:0 0 5px; font-weight:bold; text-align:center;} .help li p{ display:block; text-align:center; margin:0 0 20px;} /*お問い合わせ*/ #contents .contact .contactmenu{ text-align:center; margin:0 0 40px;} #contents .contact .contactmenu li{ display:inline;} #contents .contact .contactmenu li a{ display:block; margin:0 0 1px; background-color:#50C7C6; padding:10px 15px;; color:#fff; text-decoration:none;} #contents .contact .contactmenu li a:hover{ background-color:#4374d7;text-decoration:none;} /*利用規約*/ #contents .setting ol li{ list-style-type:none;} /*IS_SMA*/ .sma01{ margin:20px 0; text-align:center;} .sma01 li{ display:inline-block; background-color:#59D181; padding:10px; font-weight:bold; border-radius:4px; font-size:80%; margin:0 5px;} .sma01 li a{ color:#FFFFFF; text-decoration:none; } .lead{ font-size: 1em !important; line-height: 180%; text-align: center; margin-bottom: 6.6vw;} /* 登録フロー */ .entry_flow {margin-bottom:2em; font-size:0.857em; line-height:1.5; width: 100%;} .entry_flow .step {width:33%; height:auto; padding:0.5em 0.75em; background-color:#eee; color:#999; position:relative;} /*.entry_flow .step03 {width:19%;}*/ .entry_flow .step:before {width:0; height:0; border-style:solid; border-width:0 0 3em 1em; border-color:transparent transparent #fff transparent; content:""; position:absolute; right:0; bottom:0;} .entry_flow .step:after {width:0; height:0; border-style:solid; border-width:0 1em 3em 0; border-color: transparent #fff transparent transparent; content:""; position:absolute; right:0; top:0;} .entry_flow .step.current {background-color:#60C89D; color:#fff; font-weight:bold;} .entry_flow .step03:before,.entry_flow .step03:after {display:none;} /* 地図情報 */ .maparea_wrap{display:block;} .maparea_wrap .map_viewarea01{ width: 100%;} .maparea_wrap .map_msgarea01{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;} .maparea_wrap .map_msgarea01 .msg_list_div{width:48%;height:auto;overflow:hidden;margin:1%;border:solid 1px #ccc;padding:10px; background: #fff;} .maparea_wrap .map_msgarea01 .msg_list_div .s_gray{font-size: 90%; color:#6e6e6e; margin-right: 1.8%;} /*.maparea_wrap .map_msgarea01 .msg_list_div a.dllink{display: block; padding: 2%; color: #fff; background: #E36B32;}*/ .maparea_wrap .map_msgarea01 .msg_list_div a{display: block; padding: 2%; color: #fff; background:#fd9367; border-radius: 2px; text-align: center; font-size: 80%; margin: 4% 0 0;} .maparea_wrap .map_msgarea01 .msg_list_div a:hover{ background: #fdcd83;} .maparea_wrap .map_msgarea01 .msg_list_div .red:before{ content:''; display: inline-block; width: 18px; height: 18px; background-image: url(images/icon_p_high.png); background-size: contain; vertical-align: middle; margin-right: 2%; position: relative; top:-1%;} .maparea_wrap .map_msgarea01 .msg_list_div .green:before{ content:''; display: inline-block; width: 18px; height: 18px; background-image: url(images/icon_p_low.png); background-size: contain; vertical-align: middle; margin-right: 1%; position: relative; top:-2px;} .maparea_wrap .map_msgarea01 .msg_list_div .blue:before{ content:''; display: inline-block; width: 18px; height: 18px; background-image: url(images/icon_p_middle.png); background-size: contain; vertical-align: middle; margin-right: 2%; position: relative; top:-2px;} /* 画像拡大 */ .maparea_modal{display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 700;} .maparea_modal__bg{background: rgba(0,0,0,0.6); height: 100vh; position: absolute; width: 100%;} .maparea_modal__content{background: #fff; left: 50%; padding: 4%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 94%; z-index: 1000;} .maparea_modal__content img{width: 100%; height: auto;} .maparea_modal__content .js-modal-close{ display: block; text-align: center; position: absolute;top:0; right: 0;padding: 1% 2.6%; background: #999; color: #fff; font-size: 160%;} /*回転*/ .rotate90 {transform: rotate( 90deg );} .rotate180 {transform: rotate( 180deg );} .rotate270 {transform: rotate( 270deg );} .btn_rotate{ width: 20%; margin: 0.5% auto 0; padding:1% 2%; border-radius: 4px; background: #eee; font-size: 90%;} .btn_rotate:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f2f1"; margin-right:4px; font-size: 90%;} #rot01,#rot02,#rot03{display: inline-block; width: 30%; margin: 2% 2% 2% 0; padding:2.2% 0; text-align: center; border-radius: 4px; background: #f0f0f0; font-size: 90%;border: 1px solid #e0e0e0;} #rot01 .txt10,#rot02 .txt10,#rot03 .txt10{display: none;} #rot01:hover,#rot02:hover,#rot03:hover{background: #999; color: #fff;} /*回転する*/ #rot01:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f2f1"; margin-right:4px; font-size: 90%;} /*拡大する*/ #rot02:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f31e"; margin-right:4px; font-size: 90%;} /*縮小する*/ #rot03:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f78c"; margin-right:4px; font-size: 90%;} /*メッセージ管理*/ .history_adm_searcharea{ background: #eee; padding: 4% 4%; border-radius: 2px; margin: 0 0 2vw;} .history_adm_wrap{} .history_adm_wrap .history_adm_cont_wrap{border-bottom:1px solid #e9e9e9;padding:10px; margin: 0 0 3%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont .history_adm_cont__name{ display: block; width: 100%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont .history_adm_cont__date{ display: block; width: 100%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont{ width: 72%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont .bodyimg img{ width: 300px; height: auto;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont .dlbtn a{display: block; width: 60%; padding: 2%; color: #fff; background:#fd9367; border-radius: 2px; text-align: center; font-size: 80%; margin:1% 0;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont .dlbtn a:hover{ background: #fdcd83;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte{width: 26%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte input{padding: 2%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .select_del:before{content: none;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .select_del{ display: flex; align-items: center; width: 80%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .input_select_del{ display: flex; align-items: center; width: 20% !important; margin: 0 !important; padding: 0 !important; transform: scale(1.4)} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .select_del_wr{display: -webkit-flex; display: flex; /*-webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;*/ align-items: center; padding: 2% 0;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .force01{ display: block; width: 100%; border-radius: 1px; padding: 2%; background: #26cf8e; color: #fff; text-align: center;} /*メッセージ送信*/ .send_msg_admin_wrap .file_select{ margin: 2% 0;} .send_msg_admin_wrap .file_select label{ padding: 10px 18px; border-radius: 20px; background: #E95889; color: #fff; background: -moz-linear-gradient(right, #e86d97, #E95889); background: -webkit-linear-gradient(right, #e86d97, #E95889); background: linear-gradient(to right, #e86d97, #E95889); } .send_msg_admin_wrap .selectedPhoto{ margin: 20px 0 10px 0;} .send_msg_admin_wrap textarea{height:10em; border: 1px solid #a6b8c1;border-radius: 2px; padding:10px; box-sizing:border-box; margin: 0 0 10px;} .send_msg_admin_wrap .msg_importance{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start; margin: 4% 0;} .send_msg_admin_wrap .msg_importance label{ padding: 0 2% 0 0; width: 32%;} .send_msg_admin_wrap .msg_importance label input{width:auto !important;} .send_msg_admin_wrap .msg_importance label input[type="checkbox"]{ margin-right: 4% !important;} .send_msg_admin_wrap .msg_importance label input[type="radio"]{ margin-right: 4% !important;} .send_msg_admin_wrap .msg_importance span.s_gray_b{ display: block; width: 100%;} /*.send_msg_admin_wrap .grp_select01{ margin: 0 0 4%;}*/ /*mypage-セレクトボックス*/ .grp_select01 {overflow: hidden;width: 100%;margin: 0 0 2%;text-align: center;} .grp_select02 {overflow: hidden;width: 100%;margin: 0 0 0.5%;text-align: center;} .grp_select01 select,.grp_select02 select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: none; outline: none; background: transparent; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .grp_select01 select::-ms-expand,.grp_select02 select::-ms-expand { display: none; } .grp_select01.cp_sl01,.grp_select02.cp_sl02 { position: relative; border: 1px solid #bbbbbb; border-radius: 2px; background: #ffffff; } .grp_select01.cp_sl01::before,.grp_select02.cp_sl02::before { position: absolute; top: 1.1em; right: 0.9em; width: 0; height: 0; padding: 0; content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #666666; pointer-events: none; } .grp_select01.cp_sl01 select,.grp_select02.cp_sl02 select {padding: 8px 38px 8px 8px;color: #666666;} /*mypage-検索ボックス*/ .grp_select03 {overflow: hidden;width: 100%;margin: 0 0 2%;text-align: center;} .grp_select03.cp_sl03 {position: relative;border: none;border-radius: 2px;background: none;} .grp_select04 {overflow: hidden;width: 100%;margin: 0 0 2%;text-align: left;} .grp_select04.cp_sl04 {position: relative;border: none;border-radius: 2px;background: none;} .grp_select05 {overflow: hidden;width: 100%;margin: 0 0 2%;text-align: left;} .grp_select05.cp_sl05 {position: relative;border: none;border-radius: 2px;background: none;} /*mypage-ボタン*/ .btn_ap{display: block; width: 100% !important; color: #fff; text-align: center; line-height: 1; margin: 0 auto; padding: 3% !important; position: relative; cursor: pointer; border: none; box-shadow: 0px 0px 4px rgba(0,0,0,0.3); background:#26a69a; background: -moz-linear-gradient(right, #26a69a, #3ab5aa); background: -webkit-linear-gradient(right, #26a69a, #3ab5aa); background: linear-gradient(to right, #26a69a, #3ab5aa);} .grp_sortdate { display: flex; align-items: center;margin: 0 0 2%;} .grp_sortdate input{width: 44% !important; border: 1px solid #bbbbbb !important;} .s_gray_b{font-size: 90%; /*color:#6e6e6e;*/ font-weight: bold;} .s_gray_b2{font-size: 90%; color:#6e6e6e; font-weight: normal; margin-bottom: 0.8%;} /*商品*/ .products_flex {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;} .results_wrap.flex{ display: flex; justify-content:space-between;} .products_box { width: calc(94%/2); margin-bottom: 2%;} .products_box figure { background: #fff; padding: 4%; border: 1px solid #E8E8E8;} .products_dtl{} #product_main{ background: #fff; padding: 4%; border: 1px solid rgba(204, 204, 204,0.6); text-align: center; margin-bottom: 6%;/*box-shadow: 3px 3px 3px rgba(232, 232, 232,0.3);*/} #product_main img{ width: 100% !important; height: auto;} .pj_img01{width: 30%; height: auto;border: 1px solid #E8E8E8; background: #fff; margin-bottom:0;} .pj_img01 img{width: 100%; height: auto;} .product_catch h3{ height: auto; line-height: 180%;} #product_side{ width: 100%; margin: 0 auto;} #product_side .cart01{ width: 100%; margin: 0 auto;} #product_side .cart01 th{ font-weight: 500; padding: 1.4%; width: 45%;} #product_side .cart01 th span,#product_side .cart01 th label{ display: block; padding: 4%; background: rgba(232, 232, 232,0.9); border-radius: 4px; font-size: 0.9em;} #product_side .cart01 td{ text-align: right; font-weight: 600; padding:0;} #product_side .cart01 td.td02{ text-align: right; font-size: 120%;} #product_side .cart01 td.td02 span{ font-size: 0.8em;} #product_side .cart01 input[type="number"]{ width: 50%; margin: 0 3%;} #product_side .cart_btn{ position: relative; display: block; padding: 1em .5em; font-weight:bold; color: #fff; text-align: center; text-decoration: none; transition: all .3s; width:100%; margin:6% 0; font-size:1em; background: #E85153; border: none; border-radius: 4px; } #product_side .cart_btn:hover{ opacity: 0.8;} .pdt_detail{ background: #fff; padding: 4%;} .pdt_detail h3{ display: block; margin: 0;background: #005bb2;color: #fff;box-shadow: 2px 2px 3px rgba(0,0,0,0.1);padding: 1.4% 2%;font-size: 1.1em;font-weight: bold;text-align: center;} #main_wide{ margin: 4% auto;} #contents .inner.pdt #main_wide #detail{ line-height: 160%; padding: 0; font-feature-settings: "palt";} #contents .inner.pdt #main_wide #detail h4.h4ttl{} #contents .inner.pdt #main_wide #detail .ec_picarea{display: flex; align-items: center; justify-content:space-around; margin-bottom: 2%;} #contents .inner.pdt #main_wide #detail .ec_picarea li{ width: calc(94%/3); border: 1px solid rgba(204, 204, 204, 0.6);} #main_wide h3{ height: auto; line-height: 180%;} .cart_item{ display: flex; align-items: center; justify-content:flex-start; margin-bottom: 2%;} .cart_item figure { width: 30%; background: #fff; padding: 4%; border: 1px solid #E8E8E8; margin-right: 2%;} .cart_item .order_info{ width: 60%;} .cart_item .order_info p{ font-size: 1.4em;} .order_account .sub_total .price .sub_total{ font-size: 1em; padding: 2% 0;} .order_price{ padding: 2%; background: #fff;text-align: right; margin-bottom: 4%;} .order_price dl{ display: flex; align-items: center; justify-content: flex-end; } .order_price dt{ margin-right: 1%;} .order_price dt:after{content: ":"} .order_price dd{font-size: 1.2em; font-weight: bold;color:#E85153;} .submitBtn{ display:block;lign-items: center; justify-content: space-between;} .submitBtn li:first-of-type a, .submitBtn li:first-of-type input {display:block; background-color:#fff; width:90% !important; color:#0d97ff; padding:1.15em 0 !important; text-align:center; margin: 4vw auto !important;border-radius: 2px !important; border: 1px solid #41adff !important;} .submitBtn li:first-of-type a:hover, .submitBtn li:first-of-type input:hover {background-color:#0d97ff;border: 1px solid #41adff; color: #fff;} .submitBtn li:last-of-type a, .submitBtn li:last-of-type input {display:block; background-color:#0d97ff; width:90% !important; color:#fff; padding:1.15em 0 !important; text-align:center; margin: 4vw auto !important;border-radius: 2px !important; border: 1px solid #41adff !important;} .submitBtn li:last-of-type a:hover, .submitBtn li:last-of-type input:hover {background-color:#fff;background: #fff; border: 1px solid #41adff; color: #41adff;} .delete_btn{position:relative;} .delete_btn button{ padding: 1% 2% !important; margin: 1% 1% 2% 1% !important; position: relative; right: 0; top:0; font-size: 0.8em !important; background: #7D7979 !important; width: 60% !important; border: 1px solid #7D7979;} .order_account .number{ display: flex; align-items: center; justify-content:flex-start;} /*商品タグ*/ .pd_taglist{ display: block;width: 100%; margin-bottom: 2%;font-feature-settings: "palt";} .pd_taglist a{ display: inline-block; padding: 1% 6%; font-size: 0.8em; border-radius: 50px; background-color: rgba(69, 85, 108,1); color: #fff; margin: 0.8% 0.2%;} .pd_taglist a:hover,.pd_taglist a.cate_active{background-color:#fff; color: #005bb2;} .pd_taglist span.flt{display:none; } .products_box [class^="cate_"]{ display:inline-block; padding: 2% 7%; font-size: 0.6em; border-radius: 50px; background-color: rgba(69, 85, 108,.8); color: #fff; margin: 5% 0 3%; line-height: 120%;} .products_box .cate_1:before{content: "有線機器"} .products_box .cate_2:before{content: "ぐるかむ対応ボタン付無線機器"} .products_box .cate_3:before{content: "マイクミュート機能付無線機器"} .products_box .cate_4:before{content: "他市販品無線機器"} .products_box .cate_9:before{content: "その他"} /*商品詳細用画像*/ .pd_dtl_imglist{ display: flex; align-items: center; justify-content:flex-start; flex-wrap: wrap;} .pd_dtl_imggazo{ width: 160px; height: auto; border:1px solid rgba(204, 204, 204,0.6); margin: 0 2% 4%;} .pd_dtl_imggazo img{ width: 100%; height: auto;} /* レイアウトタイプ01 */ input#post,input#od_post {width:50%; margin-left:0.5em;}/* 郵便番号 */ form.type01 {width:100%; margin:1em auto 2em; /*padding:1em;*/} form.type01 dl{ margin-bottom: 4%;} form.type01 dt {margin-bottom:0.5em; font-weight:bold;} form.type01 dd {margin-bottom:1em;} form.type01 h3{color:#1e88e5; font-size:16px; border-left:6px solid #1e88e5; text-indent:5px; margin-bottom:2%; text-shadow: none; text-align: left; padding: 0 1%;} #btn_copyod{background:#E85153; color: #fff; padding: 6px 10px; width: 100%; margin: 0 0 20px auto; text-align: center; cursor: pointer;} form.type01 .hissu{background-color:#fafafa !important; color:#37474f; font-size: 16px;padding: 0;border-radius: 0;margin: 0 0 4%; top:0; position: relative;} form.type01 .hissu sup,sup{color: #ff7043; margin:0 1%;} form.type01 select,form.type01 select{padding: 8px 15px 8px 5px;color: #333;font-size:12px;} /* 注文内容の確認 */ .validation{width:100%; margin:1em auto; /*padding:1em;*/ box-sizing:border-box;} .validation h3{color:#1e88e5; font-size:16px; border-left:6px solid #1e88e5; text-indent:5px; margin-bottom:2%; text-shadow: none; text-align: left; padding: 0 1%; height: auto; line-height: 120%;} .receiver_info{width:100%; margin-bottom:2em;} .receiver_info dt{padding:5px 0; box-sizing:border-box; font-weight:bold;} .receiver_info dd{border-bottom:1px solid #ccc; padding-bottom:5px;} .agree{ font-size: 0.9em;} .agree input[type="checkbox"]{ width: auto !important; margin-right: 1% !important;} /* 注文履歴一覧 */ /* テーブル２（trごとに分離） */ .tbl02 {width:100%; line-height:1.5; color: #333;} .tbl02 thead {display:none;} .tbl02 tr {display:block; margin-bottom:1em; padding:0.5em 1em; background-color:#fff;} .tbl02 td {display:block; padding:0.5em 0.5em 0.5em 7em; border-bottom:1px dotted #aaa; position:relative;} .tbl02 td:last-child {border:none;} .tbl02 td:before {position:absolute; top:calc(0.5em + 1px); left:0; content:attr(data-label); white-space:pre; font-weight:bold; margin-right:1em;} .tbl02 td.row2 {min-height:4em;} .tbl02 td.row2:before {content:attr(data-label1) "\A" attr(data-label2);} .my_history .price span {color: #E85153; font-size: 1.2em; font-weight: bold;} .my_history td .btn01 a {display: inline-block; width: auto; line-height: 1; padding: 0.5em 1em; margin: 0.25em 0 0; white-space: nowrap;} /*導入事例*/ .case_info{display: block; background:rgba(0, 91, 178, 0.1); font-size: 1em; text-shadow: none; color: #222; width: 100%; height: auto; line-height: 100%; font-weight: normal; padding: 3% 3%;} .case_info .logo{ width: 36%; background: #fff; padding: 2%; margin:0 auto 1%;} .case_info .info{ width: 100%;} .case_info .info dl{display: flex; flex-wrap: wrap; align-items: center; justify-content:flex-start; font-size: 0.9em;} .case_info .info dt{ width: 23%; text-align: left; padding: 1%; font-weight: 600;} .case_info .info dt span{ display: inline-block; width: 100%; height: auto;line-height: 100%;text-align: center; padding: 0.4em; border-radius: 4px;color: #fff; background:rgba(9, 96, 173, 0.85); font-size: 0.9em;} .case_info .info dd{ width: 77%; text-align: left;padding: 1%;} .case_info .info dd:last-child:after,.gde_lead_mng.center a:after{font-family: 'Font Awesome 5 free'; content:"\f35d";margin-left:8px; color: #2698ed; font-size: 0.8em; font-weight: 900;} .gde_lead_mng.center a{ text-decoration: none;} .contwrap{ margin: 4vw 0; line-height: 160%; background: #fff; padding: 4% 6%;} .contwrap h3{display: block; width: 100%; padding: 4% 0 2%; text-shadow: none; color: #002f6c; height: auto; line-height: 140%; font-size: 1.25em; border-bottom: 1px solid #002f6c; margin-bottom: 8%;} .contwrap figure{ background: #fff; } .fig1{display: block;width: 100%; margin: 0 auto 8%;} .fig2{display: block;width: 100%; margin: 0 auto 8%;} .fig2 a{ margin-bottom: 4%; display: block;} /*.fig2{display: flex; flex-wrap: wrap; align-items: center; justify-content:space-between;width: 100%; margin: 0 auto 8%;} */ .fig2 figure{ width: 48%;} .contwrap .txtarea{} .contwrap .txtarea p{margin: 0 0 8%;} .contwrap .txtarea h4{display: block; width: 100%; padding:0 4%; text-shadow: none; color: #222; height: auto; line-height: 140%; font-size: 1.1em; margin-bottom: 4%; border-left: 4px solid rgba(0, 91, 178, 0.7); border-radius: 1px;} .contwrap .txtarea h4 span{ display: inline-block; margin-right: 4%; color: rgba(0, 91, 178, 0.7);} .contwrap .contbox_li li{ display: flex; align-items:flex-start; padding: 0 2%;} .contwrap .contbox_li li:before{ content: "●"; color: rgba(0, 91, 178, 0.7); font-size: 0.5em; margin-right: 3%;} .contgrid{display: flex; flex-wrap: wrap; align-items: center; justify-content:flex-start; font-size: 0.9em; border-bottom: 1px solid rgba(0, 91, 178, 0.5);} .contgrid:first-child{ border-top: 2px solid rgba(0, 91, 178, 0.5); margin-top: 8%;} .contgrid:nth-child(3){ border-bottom: 2px solid rgba(0, 91, 178, 0.5);margin-bottom: 8%;} .contgrid .cgrid_ttl{ width: 18%; padding: 1%; font-weight: 600;color: #222;font-size: 1.1em; text-align: center;} .contgrid .cgrid_txt{ width: 82%; text-align: left;padding: 4% 1%;} /*ご利用プランページ*/ .price_plan_wrap{display: block;margin-bottom: 12vw;} .price_plan_main{ width:100%; background:rgba(255,255,255,1); padding: 1% 1% 2%;border: solid 1px rgba(221, 221, 221,0.8); border-radius:0px 0px 6px 6px; margin-bottom: 10px;} .price_plan_main.free{ border-top:8px solid #45556C !important;} .price_plan_main.monthly{ border-top:8px solid #50C7C6 !important;} .price_plan_main.annual{ border-top:8px solid #55bcdf !important;} .price_plan_main .ttl_lead{display:flex; justify-content: center; margin: 2% auto;} .price_plan_main .ttl_lead li{display: inline-block; padding: 1% 4%; font-size: .7em; background-color:rgba(97, 168, 237, 0.1); border-radius: 50px; margin: 0.3% 0.6%;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight:600;font-style: normal;} .price_plan_main h3.price_plan_ttl{ text-align: center !important; font-size: 1.25em !important; padding: 0 0 10px !important;} .price_plan_main h3.price_plan_ttl span{ display: block; font-size: 0.75em; background-image: none; height: auto; color: #fff; margin: 0 auto 2%; padding: 1%; font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight:600;font-style: normal; letter-spacing: .1em;} .price_plan_main.free h3.price_plan_ttl span{color:#45556C;} .price_plan_main.monthly h3.price_plan_ttl span{color:#50C7C6;} .price_plan_main.annual h3.price_plan_ttl span{color:#55bcdf;} .price_plan_main button{ width: 80% !important; margin: 4% auto !important; border: none !important; padding: 1.4% 0; border-radius: 50px !important;} .price_plan_main button a{ width: 100% !important; color: #fff !important; font-size: .8em !important;} .price_plan_main.free button{background-color:#45556C !important;} .price_plan_main.monthly button{background-color:#50C7C6 !important;} .price_plan_main.annual button{background-color:#55bcdf !important;} .price_plan_main.free button:hover{background-color:rgba(69, 85, 108,0.7) !important;} .price_plan_main.monthly button:hover{background-color:rgba(80, 199, 198,0.7) !important;} .price_plan_main.annual button:hover{background-color:rgba(85, 188, 223,0.7) !important;} .price_plan_main .price_plan_box01 .price01{ text-align: center; font-size: 1.5em;font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight:600;font-style: normal;} .price_plan_main .price_plan_box01 .price01 em{font-size: 0.6em;} .price_plan_main .price_plan_box01 .pt01{ display: block; text-align: center; background:rgba(248, 245, 236, .4);color: #45556C; font-size: 0.785em; width: 30%; margin:0 auto 6%;;padding: 1%; border: 1px solid rgba(69, 85, 108,0.8);} .price_plan_main .price_plan_box01 .pt02{ display: block; text-align: center; font-size: 0.785em;} .price_plan_main .price_plan_box02 ul{display: block; width: 80%; margin: auto;} .price_plan_main .price_plan_box02 li{ font-size: 0.9em; padding: 1.8% 0; border-bottom: 1px dotted rgba(221, 221, 221,0.8); position: relative;} .price_plan_main .price_plan_box02 li:last-child{border-bottom:none;} .price_plan_main .price_plan_box02 li.on{ font-weight: 600;} .price_plan_main .price_plan_box02 li.on:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f058";color:rgba(69, 85, 108,1.0);margin-right: 4%;} .price_plan_main .price_plan_box02 li.off{color:#ccc !important;} .price_plan_main .price_plan_box02 li.off:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f068";margin-right: 4%;} .price_plan_main .price_plan_box02 .exp{ display: block; width: 80%; text-align: right; font-size: 0.8em; margin: 2% auto;} /*テーブル*/ .plan_tbl_wrap{overflow-x:scroll; overflow-y: hidden;} .plan_tbl{width: 100%; min-width: 800px; border-collapse: collapse;border-spacing: 0; font-size: 0.9em; margin-bottom: 1%;} .plan_tbl th{text-align: center;padding: 1%;border:solid 1px #ddd; font-weight: normal; background: #fff;} .plan_tbl th.stk{position: sticky;top:0;left: 0;z-index: 1;border-left: none;border-right: none;background: none;} .plan_tbl th.stk:before{content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-left: 1px #ddd solid; border-right: 1px #ddd solid; background-color: #fff; z-index: -1; box-sizing: content-box;} .plan_tbl td{text-align: center;padding: 1%;border:solid 1px #ddd; background: #fff;} .plan_tbl th.kinogrp{background-color: rgba(97, 168, 237, 0.1); text-align: left; font-weight: 600;} .plan_tbl td.maru:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f111";color:rgba(69, 85, 108,1.0);} .plan_tbl td.batsu:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f068";color:#ccc} .plan_tbl td.biko{ font-size: 0.875em; } .sml{ display: block;font-size: 0.75em; } .plan_tbl th:nth-child(1),.plan_tbl td:nth-child(5){ text-align: left;} .plan_tbl th:nth-child(1),.plan_tbl td:nth-child(2){width: 13%;} .plan_tbl td:nth-child(3),.plan_tbl td:nth-child(4){width: 13%;} .plan_tbl tr:nth-child(1){ background: none;} .plan_tbl tr:nth-child(1) th:nth-child(2){ border-bottom:5px solid #45556C !important; font-weight: 600;} .plan_tbl tr:nth-child(1) th:nth-child(3){ border-bottom:5px solid #50C7C6 !important; font-weight: 600;} .plan_tbl tr:nth-child(1) th:nth-child(4){ border-bottom:5px solid #55bcdf !important; font-weight: 600;} .plan_tbl tr:nth-child(1) th:nth-child(5){ font-size: 0.9em; font-weight: 600;} .plan_tbl tr:nth-child(1) th span{ display: block; font-size: 0.75em; background-image: none; height: auto; margin: 0 auto 2%; padding: 1%; font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight:600;font-style: normal; letter-spacing: .1em;} .plan_tbl tr:nth-child(1) th.free span{color:#45556C;} .plan_tbl tr:nth-child(1) th.monthly span{color:#50C7C6;} .plan_tbl tr:nth-child(1) th.annual span{color:#55bcdf;} .plan_tbl tr:nth-child(1) th .price01{ text-align: center; font-size: 1.1em;font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight:600;font-style: normal;} .plan_tbl tr:nth-child(1) th .price01 em{font-size: 0.6em;} .dokuji{background: rgba(231,69,118,0.9); color: #fff; font-size:8.5px; padding: 0.8% 4%; border-radius: 6px;text-align: center; display: inline-block;} .price_plan_main .price_plan_box02 li .dokuji{ display: inline-block; position: absolute; right: 0; width: 20%; } .plan_tbl th:nth-child(1) .dokuji{ display:block; position: relative; width: 28%; } .sml .dokuji{padding: 0.4% 1%; margin:0 .4%;} @media screen and (min-width : 980px) { .price_plan_wrap{display: flex; flex-wrap: wrap; justify-content:space-between; margin-bottom: 4%;} .price_plan_main{ width: calc(94%/3); background:rgba(255,255,255,1); padding: 1% 1% 2%;border: solid 1px rgba(221, 221, 221,0.8); border-radius:0px 0px 6px 6px; margin-bottom: 0;} .plan_tbl_wrap{overflow: hidden;} .plan_tbl{width: 100%; min-width: 1000px; border-collapse: collapse;border-spacing: 0; font-size: 0.9em; margin-bottom: 1%;} .plan_tbl th:nth-child(1),.plan_tbl td:nth-child(2){width: 15%;} .plan_tbl td:nth-child(3),.plan_tbl td:nth-child(4){width: 18%;} .plan_tbl tr:nth-child(1) th .price01{ text-align: center; font-size: 1.5em;font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight:600;font-style: normal;} } @media screen and (max-width : 768px) { /* -------------------------------------------------- トップページ -------------------------------------------------- */ .pc_only {display:none;} .sp_only {display:block;} .products_flex {display: block !important;} #header{ padding:30px 0;} #header h1{ position:absolute; top:5px; left:-100%; right: -100%; margin: auto; width: 150px;} #header h1 img{ width:100%; height:auto;} .drawer_toggle{ position:absolute; top:10px; right:10px;} /*.catch{ overflow:hidden; background-image:url(images/incom2.jpg); background-size:35%; background-position:210px 90px; background-repeat:no-repeat;}*/ .catch{ overflow:hidden; background-image:url(images/incom2.jpg); background-size:20%; background-position:100% 50%; background-repeat:no-repeat;} /*スマホアプリincomとは？*/ #second p br{ display:none;} #second img{ width:auto;} #third table td span.or{width:auto;overflow:auto;height:auto;} #contents input{ padding:2% 1%;} /*.center {text-align:center;}*/ .center i { margin: 2% 1.5%;} .mb60{ margin-bottom:30px;} .lead{ font-size: 1.1em; line-height: 180%; text-align: center; margin-bottom: 2.2vw;} /*商品*/ .pj_img01{width: 50%; height: auto;border: 1px solid #E8E8E8; background: #fff; margin:0 auto;} .pj_img01 img{width: 100%; height: auto;} } @media print, screen and (min-width:769px) and (max-width : 979px) { #header h1 { width: 180px;} .gde_lead_mng_box li{width: calc(98%/2);} } @media print{ #header{ display: none;} .ttl_guide_planname2 li{ font-size: 0.8em;} .gde_lead_mng p strong{ font-size: 0.8em !important;} #contents dl.service-flow dd .twocl .clmbox figure{ width: 70% !important;} } @media print, screen and (min-width : 768px) { /* -------------------------------------------------- フッター -------------------------------------------------- */ footer {padding:60px 0 30px;} #footer h1 {width:253px; padding:0; margin-bottom:80px;} #footer ul {font-size:0; margin-bottom:100px; border:none;} #footer li {display:inline-block; font-size:16px; margin:0 1em 1.5em 0; padding-right:1em; border-right:1px solid #444;} #footer li:last-child {margin-right:0; padding-right:0; border:none;} #footer li a {display:inline; padding:0; border:none;} #footer li a:hover {color:#999; text-decoration:underline;} #footer .copyright {font-size:14px; padding:0;} /* ページャー */ .pager li a:hover { background-color:#ccc; color:#fff;} #rot01,#rot02,#rot03{width: 20%; margin: 1% 1% 1% 0; padding:0.5% 0;} /* ステップバー2 */ .stepBar2 { position: relative; list-style: none; margin: 0 auto 1em; padding: 0; text-align: center; width: 95%; overflow: hidden; *zoom: 1; } .stepBar2 .step2 { position: relative; float: left; display: inline-block; line-height: 1.4; padding: 10px 40px 10px 20px; background-color: #eee; color:#888; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .stepBar2 .step2:before, .stepBar2 .step2:after { position: absolute; left: -15px; display: block; content: ''; background-color: #eee; border-left: 4px solid #FFF; width: 20px; height: 18px; } #contents .sf_bln a .stpp{ display: block; padding: 1% 2%; color: #fff; font-size: 80%; font-weight: normal; margin:0 2% 0 0;} #contents .sf_bln a .stptit{ display:inherit; width: auto; font-weight: 700; text-align: center;} } /* -------------------------------------------------- 980px〜　PC -------------------------------------------------- */ @media screen and (min-width : 980px) { /* -------------------------------------------------- ベース -------------------------------------------------- */ body {width:100%;} /* パンクズ */ .breadcrumb{ display: block; width:80%;padding:2% 0;margin: auto; font-size: 0.8em;} .breadcrumb ul{ display: flex; justify-content: flex-start; align-items: center;} .breadcrumb li{font-size:.9em; display:block;} .breadcrumb li a:after {margin:0 .5em; content: ">"; color:#999;} .breadcrumb li:nth-child(n+2){/*width: 300px;*/width:auto; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} /* レイアウト */ #contents {width:100%; margin:0; overflow:hidden;} #contents .inner{ width:1000px; margin:4vw auto 8vw;} #contents .inner.pdt{ width:1000px; margin:0 auto 8vw;} #contents .inner.pdt h2{margin-top: 0 !important;} .inner{ width:1000px; margin:0 auto;} /* センター揃え */ .center {text-align:center;} .center i { margin: 0.8% 1%;} /* -------------------------------------------------- ヘッダ -------------------------------------------------- */ #header {/*width:100%; margin:0 auto; padding:10px 0; border:none; height:70px; box-sizing:border-box;background-color: rgba(255, 255, 255, 0.9);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);*/} #header h1 { width: 180px;} #header .drawer_toggle {display:none;} /* -------------------------------------------------- Gナビ -------------------------------------------------- */ /*#g_navi {display:block !important; position:relative; float:right; box-shadow:none; width:83%; top:20px; padding: 0;}*/ #g_navi {display: flex;width: 83%;justify-content: flex-end;align-items: center; padding: 0; top:0; background: none; box-shadow: none;} #g_navi ul{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:space-around; justify-content:space-around; width: 100%; align-items:baseline;} #g_navi ul li{ margin-left: 0;} #g_navi ul li a{ white-space: nowrap; font-size:1.2vw;} /*hover*/ #g_navi li:after {position:absolute; top:0; right:0; display:block; content:""; width:1px; height:14px; /*background-color:#fff;*/} #g_navi a:after {opacity:0; content:""; display:block; width:0; height:1px; background-color:rgba(34, 34, 34,0.4); margin:6px auto 0; -webkit-transition: all 0.25s cubic-bezier(.25,.1,.25,1); transition: all 0.25s cubic-bezier(.25,.1,.25,1);} #g_navi a:hover:after {width:100%; opacity:1;} /*アカウント登録、ログイン*/ #g_navi li.btn33,#g_navi li.btn44{ display: inline-block; padding:0 !important; margin: 0; position: relative; width: auto !important; border: none !important; } #g_navi li:nth-child(6){ margin: 0 !important;} #g_navi li.btn33 a,#g_navi li.btn44 a{ display: block; padding: 10% 0 10% 0;border-radius: 2px;position: relative;background:rgba(255, 255, 255,0.5);border: 1px solid #005fc4;margin: 0 0 0 1%; color: #005fc4; text-align: center; width: 140px;} /*#g_navi li.btn33{padding: 1.2% 1.9% 0.8% 1%; border-radius: 2px; position:relative; background: #fff;border: 1px solid #1e88e5; width: auto; margin: 0 0 0 2.2%;} #g_navi li.btn33 a{color: #1e88e5;}*/ /*#g_navi li:hover:nth-last-child(3) a{background:rgba(217, 242, 251, 0.5);}*/ #g_navi li a:hover{background:rgba(217, 242, 251, 0.5);} #g_navi li.btn33 a:after{display: none;} #g_navi li.btn33 a:hover:after{display: none;} /*言語*/ #g_navi li.btn44 a{color: #008e76;} #g_navi li.btn44:hover:last-child a{background:rgba(190, 250, 222, 0.5);} #g_navi li.btn44:last-child a:hover:after{display: none;} /* -------------------------------------------------- 共通 -------------------------------------------------- */ /*img {height: auto; width: auto; }*/ /* -------------------------------------------------- フッター -------------------------------------------------- */ footer {padding:60px 0 30px;} #footer h1 {width:253px; padding:0; margin-bottom:80px;} #footer ul {font-size:0; margin-bottom:100px; border:none;} #footer li {display:inline-block; font-size:16px; margin:0 1em 1.5em 0; padding-right:1em; border-right:1px solid #444;} #footer li:last-child {margin-right:0; padding-right:0; border:none;} #footer li a {display:inline; padding:0; border:none;} #footer li a:hover {color:#999; text-decoration:underline;} #footer .copyright {font-size:14px; padding:0;} /* -------------------------------------------------- トップページ -------------------------------------------------- */ /*ファーストビュー*/ .first{ background-color:#4374D7; overflow:hidden; background-image:url(images/first_bg2.png); background-repeat:no-repeat; background-size:contain; background-position:left;} /*.catch{ min-width:322px; overflow:hidden;}*/ .catch{ min-width:322px; overflow:hidden; background-image:url(images/incom2.jpg); background-size:20%; background-position:620px; background-repeat:no-repeat;} .catch h2{ width:550px; position:relative; left:360px; top:90px; text-align:center; color:#fff; font-size:32px;} .catch h2 span{ font-size:22px; margin:0 10px; font-weight:normal;} .catch p.lead{ display:block; width:550px; font-size:16px; margin:0 10px; font-weight:normal; position:relative; left:360px; top:60px; text-align:center; background-image:url(images/h2_lead_bg.png); padding:5px; border-radius:4px;} .catch .button a{ display:block; width:230px; padding:10px; margin:130px 0 80px; box-sizing:border-box; position:relative; left:500px; background-color:#59D181; color:#fff; border-radius:6px; box-shadow:3px 3px 1px #484848; text-align:center; text-decoration:none; font-size:16px; font-weight:bold;} .catch .button a span{ font-size:14px; font-weight:normal;} .catch .button a:after {font-family:Font Awesome 5 free; content:"\f105"; font-size:16px; margin-left:8px; font-weight: 900;} .catch .button a:hover{margin:133px 0 77px 3px; box-shadow:none;} .catch .button a:active{ background-color:#0C8D51;margin:133px 0 77px 3px; box-shadow:none;} h3{ display:block; width:100%; background-size:cover; background-repeat:no-repeat; height:188px; line-height:188px; text-align:center; background-position:-50%; font-size:36px; text-shadow:0 0 15px #333, 0 0 15px #333, 0 0 0.40px #333; color:#fff;} h3 span{ display:block; width:100%; background-image:url(../images/h3_span_bg.png); height:188px;} /*スマホアプリincomとは？*/ h3.bike{ background-image:url(../images/h3_bg_bike.jpg);} #second{ background-color:#57C77D; padding:60px 0; text-align:center; color:#fff;} #second h4{ font-size:28px; font-weight:bold; margin:0 0 15px;} #second .mugendai{margin:0 0 20px;} #second p{ font-size:21px;} #second img{ width:auto;} /*料金プラン*/ h3.floor{background-image:url(../images/h3_bg_floor.jpg);} #third{ background-color:#FEAD7F; padding:60px 0; color:#fff;} #third table{ background-color:#FFC8AD; width:100%; border:none; color:#666666;} #third table tr{ } #third table tr.uline{ border-bottom:1px solid #FEAD7F;} #third table td{ padding:15px; text-align:center; box-sizing:border-box; vertical-align:middle;} #third table td span.or{ display:block; width:100px; padding:10px; background-color:#FEAD7F; border-radius:4px; box-sizing:border-box; color:#fff;} #third table td.tit{ font-size:24px; background-repeat:no-repeat; background-position:center; font-weight:bold; height:120px;} #third table td.simple{ background-image:url(../images/bg_simpleplan.png); } #third table td.buisiness{ background-image:url(../images/bg_buisinessplan.png); } #third table td.event{ background-image:url(../images/bg_eventplan.png); } /*よくある質問*/ h3.faq{background-image:url(../images/h3_bg_event.jpg); background-position:bottom !important;} #fourth{ background-color:#F16F73; padding:60px 0; color:#fff;} #fourth ul{ text-align:center;} #fourth ul li{ display:block; padding:0 0 0 40px; font-size:16px; background-repeat:no-repeat; background-position:left; text-align:left;} #fourth ul li.q{ background-image:url(../images/icon_q.png); margin:0 0 20px;} #fourth ul li.a{background-image:url(../images/icon_a.png); background-position:left 5px;} p.morebtn { text-align:center;margin:40px 0 0; font-size:16px;} p.morebtn a{ display:block; color:#FBD1D1; text-decoration:none;} /*navigation*/ #bottom-navi{ width:100%; background:#444; padding:10px 0;} #bottom-navi ul{ text-align:center;} #bottom-navi ul li{ display:inline-block; margin:0 20px;} #bottom-navi ul li.login a{ display:block; width:230px; padding:10px; box-sizing:border-box; background-color:#4374D7; color:#fff; border-radius:6px; box-shadow:2px 2px 2px #484848; text-align:center; text-decoration:none; font-size:16px; font-weight:bold;} #bottom-navi ul li.login a:hover{ background-color:#4F8AFF;} #bottom-navi ul li.entry a{ display:block; width:230px; padding:10px; box-sizing:border-box; background-color:#59D181; color:#fff; border-radius:6px; box-shadow:2px 2px 2px #484848; text-align:center; text-decoration:none; font-size:16px; font-weight:bold;} #bottom-navi ul li.entry a:hover{ background-color:#65ED93;} /* -------------------------------------------------- 下層ページ -------------------------------------------------- */ /*共通*/ #contents h2{ font-size:2rem; margin:4vw auto 4vw; /*padding: 4% 0 0;*/} #contents h2:after{ margin:1% auto 2%;} #contents .setting h3.subttl{ padding: 1.6% 2%;} #contents .setting h3.grp01{margin: 2% 0 2%;color:#074480; padding: 0; position: relative; font-size: 1.75em; font-weight: 600; text-align: center;} #contents .setting h3.subttl3{ text-align: left; margin: 0;} #contents #post_form{ width: 80%; margin: 0 auto;} .lead{ font-size: 1.1em; line-height: 180%; text-align: center; margin-bottom: 2.2vw;} /*エンタープライズお問い合わせ*/ #contents dl.form011{ display:block; font-size:16px; width:100%;} #contents dl.form011 dt{ display:block; font-size: 16px; width:100%; text-align:left; padding:0; box-sizing:border-box; vertical-align:middle; color:#666; font-weight:bold;} #contents dl.form011 dd{ display:block; width:100%; padding: 5px 0 15px; box-sizing:border-box;} #contents .setting__group{width: 80%; margin: 0 auto;} #contents input.usernum{/*width:5em;*/width:auto; margin-right: 1%;} #contents input.usernum2{width:10em;} .hissu{ background-color:#ff7043; color:#ff7043; font-size:0px; padding:0.22% 0.6%; border-radius:4px; margin:0 0 0 6px; top:-6px; position:relative;} /*よくある質問*/ #contents .setting .faqpage{ background-color:transparent; color:#666;} #contents .setting .faqpage ul{ text-align:center;} #contents .setting .faqpage h3{ display: block; font-size: 1.4em;} #contents .setting .faqpage ul li{padding:2% 2%; font-size:1em;} #contents .setting .faqpage ul li.q:before{content: "Q"; margin-right: 10px; font-weight: bold;} #contents .setting .faqpage ul li.a{ background:rgba(255,255,255,0.3); padding:2% 4% 3%;} #contents .setting .faqpage ul li.q:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\2b"; position: absolute;top:30%; right: 2%;} #contents .setting .faqpage ul li.q.active:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f068"; position: absolute;top:30%; right: 2%;} #contents .setting .faqcat{ margin: 0 0 4%;} #contents .setting .faqcat ul{justify-content: center; position: relative; z-index: 1;} #contents .setting .faqcat ul li{ display: flex; width:calc(90%/5); margin: 0 1%; text-align: center; height: auto;} #contents .setting .faqcat ul li a{ /*display:flex;*/ padding: 6% 3%; align-items: center; text-align: center; cursor: pointer; width: 100%;font-size: 0.9em;} #contents .setting .faqcat ul li a:hover{ background: rgba(0, 91, 178, 0.1);} #contents button { display:block; width:28vw; color:#fff; font-size:1.2em; padding:2% 0; text-align:center; margin: 4vw auto;} #contents button.btn20 { display:block; width:28vw; color:#fff; font-size:1.2em; padding:2% 0; text-align:center; margin: 4vw auto;} /*マイページ*/ #contents .mypage input[type="text"]{ width:100%; border: 1px solid #e0e0e0; border-radius: 2px; height: 3em; padding:0 10px; box-sizing:border-box;} #contents .mypage input[type="submit"]{ width:auto; background-color:#26a69a;border-radius: 2px;box-sizing: border-box;color: #fff;text-align: center;text-decoration: none; padding: 1% 2%;} #contents .mypage input[type="submit"]:hover{ background-color:#767676;border: 1px #767676 solid;} #contents .mypage input.btn_urlsend{ margin:5px 0 0; content: "\f14a";font-family: Font Awesome 5 free; font-weight: 900;} #contents .mypage .group-list{ padding:2%; margin:20px 0; background: #fff; box-shadow: 0px 0px 4px rgba(0,0,0,0.1);} #contents .mypage .group-list h4{padding:1.2% 0; font-size: 1em;} #contents .mypage .group-list h4:after { bottom: 34%;} #contents .mypage .group-list h4 span.m_num{ width:12%; margin-bottom: 0;} #contents .mypage .group-list h4 span.u_name{ width: 28%; margin-bottom: 0;} #contents .mypage .group-list h4 span.u_email{ width: 28%;margin-bottom: 0;} #contents .mypage .group-list h4 span.seid{ width: 18%;} #contents .mypage .group-list h4 span.user_del{position: relative; display: inline-block;width: 6%;text-align: left; right: 0;} #contents .mypage .group-list h4 span.user_del:after{ display: none;} #contents .mypage .group-list h4 span.user_del input[type="checkbox"]{width: auto; margin-right: 10%;transform: scale(1.4);} #contents .mypage .group-list dl{ padding:0;} #contents .mypage .group-list form{ margin:0 0 1%;} /*マイページ　CSV DL*/ #contents .mypage .csvdl01 input[type="submit"]{ width: auto; } #contents .mypage .csvdl01 input[type="checkbox"]{ width: auto; margin: 0 0.5% 0 2%;} #contents .mypage .csvdl01 span{ width: auto; font-size: 0.875em; color: #828282;} #contents .mypage .csvdl_inner{ padding: 2%;} #contents .mypage .csvdl_inner h4{ border-bottom: 1px solid #202121; margin-bottom: 2%; padding: 0 0 1%; font-size: 1.1em;} #contents .mypage .csvdl_inner .csvdl01 input[type="file"]{ display: block; border: none; padding: 2% 0; width: auto;} /*マイページ　グループ名保存*/ #contents .mypage .group-list .group-name form{display:flex; flex-wrap: wrap; align-items: center; margin: 2% auto 0;} #contents .mypage .group-list .group-name form .gruop-name-class{ width: 10%; margin-bottom: 1%;} #contents .mypage .group-list .group-name form .updggid-name{ width: 10%; margin-bottom: 1%;} #contents .mypage .group-list .group-name form input:first-child{ margin-right: 1%;} #contents .mypage .group-list .group-name form input{ width: auto !important;} #contents .mypage .group-list .group-name form input[type="text"]{ width: 88% !important; margin-bottom: 1%;} #contents .mypage .group-list .group-name form select{ width: 88% !important;border: 1px solid #e0e0e0; padding: 1%; margin-bottom: 1%;} #contents .mypage .group-list .group-name form [type="checkbox"]{ width: auto !important; margin:0 0.5%;} #contents .mypage .group-list .group-name form .mojichk-name{width:96% !important;} #contents .mypage .group-list .group-name form .recchk-name{width:96% !important;} /*マイページ メンバーリスト*/ #contents .mypage .group-list h3.grp01 a{cursor: pointer; margin: 0 1%;width: auto; display: inline; font-size: 0.95em; line-height: 0;} #contents .mypage .group-list dt{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; justify-content:space-around; align-items: center; margin: 0;padding: 1% 3%; } #contents .mypage .group-list dt .reflect_name{ width: 100%; display: flex; justify-content: flex-start; align-items: center; line-height: 0; margin: 1% 0 0;} #contents .mypage .group-list .m_list_wrap dt input{ /*width: 38%;*/ width: 26%; align-items: center; margin: 1% 1% 1% 0; background: #fff;} #contents .mypage .group-list .m_list_wrap dt input.btn_update{ width: 10%;align-items: center; background:#26a69a; margin: 0;} #contents .mypage .group-list .m_list_wrap dd input.btn_urlsend{ display: block; width: 34%; margin: 1% auto;} #contents .mypage .group-list .m_list_wrap dd input.btn_update,#contents .mypage .group-list .m_list_wrap input.btn_update{ display: block; width: 100%; margin: 0 0 0 auto; /*padding: 4% 0;*/} #contents .mypage .group-list .m_list_wrap .set_btm_wrap{ margin: 2% 0} #contents .mypage .group-list .m_list_wrap .set_btm_wrap form{ width: auto; display: flex; align-items: center; margin: 0 auto;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt{ width: 96%; align-items: center; text-align: left; background: #eee; border-radius: 0px; font-size: 100%;padding: 2%; margin: 0 auto; font-weight: 600;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt .idpw01{ margin:1%;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt .idpw02{ margin-right: 4%; width: auto !important; display: inline-block;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap form .btn_update{ text-align: left;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt .idpw01{ width: auto;} #contents .mypage .group-list .m_list_wrap .set_btm_wrap .set__txt input{ font-weight: normal;} #contents .mypage .group-list .m_list_wrap dt span{ display: block; padding: 1%; width: 85%;} /*--他グループへの参加--*/ #contents .mypage .group-list .m_list_wrap dd .set__txt_other{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start; align-items:stretch; width: 100%; border: 1px solid #ccc; font-size: 90%; color: #333; text-align: center;} #contents .mypage .group-list .m_list_wrap dd .other_joined_label{ display: flex; align-items: center; justify-content: center; width: 20%; padding:1% 0.5%; background: #e8e4e2; font-size: 100%;} #contents .mypage .group-list .m_list_wrap dd .other_joined_div{display: block;width: 80%; text-align: left; padding: 0.5% 1%;} #contents .mypage .group-list .m_list_wrap dd .other_joined,#contents .mypage .group-list .m_list_wrap dd .other_join{ display: block;width: 100%; text-align: left; padding: 0.5% 1%;} /*マイページ メンバー追加*/ #contents .mypage .group-list .mmb_add .mmb_add_inr input{ width: 38%;align-items: center; margin: 0 1%; background: #fff;} #contents .mypage .group-list .mmb_add .mmb_add_inr input[type="submit"]{ width: 10%;align-items: center; background:#26a69a} #contents .mypage .mypagebox{padding:2%; margin:0 0 2%; background: rgba(0, 91, 178, 0.1);} #contents .mypage .mypagebox span{ font-size:14px; color:#002f6c; font-weight: 600; margin: .2em 0;} #contents .mypage .mypagebox span#total_price{ font-size:14px; color:#666; display:inline;} /*マイページ サブメニューリスト*/ #contents .mypage .mypagemenu{ margin:0 0 40px;} #contents .mypage .mypagemenu-list{ text-align:center; display: flex; justify-content: center; align-items: center;} #contents .mypage .mypagemenu-list li{ display:block;} #contents .mypage .mypagemenu-list li br{ display:none;} #contents .mypage .mypagemenu-list li a{ display:block; margin:0; background-color:#50C7C6; padding:10px 15px;; color:#fff; text-decoration:none; font-size: 0.975rem;} #contents .mypage .mypagemenu-list li a:hover{ background-color:#4374d7;text-decoration:none;} #contents .mypage .myage-groupbox{ text-align:center; margin:4% 0 0; overflow:hidden;} #contents .mypage .myage-groupbox input[type="text"]{margin:0 0 2%;} #contents .mypage .myage-groupbox input[type="sumit"]{} /*マイページ サブメニューリスト*/ #contents .mypage .sub_menu{ margin:0 0 1%;} #contents .mypage .sub_menu-list{ text-align:center; display: flex; justify-content: center; align-items: center;} #contents .mypage .sub_menu-list li{ display:block; width: auto;} #contents .mypage .sub_menu-list li br{ display:none;} #contents .mypage .sub_menu-list li a{ display:block; margin:0; padding:10px 15px;;text-decoration:none;} #contents .mypage .sub_menu-list li a:hover{text-decoration:none;} /*マイページ ユーザ管理*/ #contents .mypage .umanage_form01{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; justify-content:space-around; margin: 0;padding: 0; align-items: center;} #contents .mypage .umanage_form01 .s_gray_b{ display: flex; align-items: center; font-size: 0.875em; font-weight: 600;} #contents .mypage .umanage_form01 input{ width: 32%;align-items: center; margin: 0; background: #fff;} #contents .mypage .umanage_form01 input[type="submit"]{width: 20%;align-items: center; background:#26a69a; margin: 0;} #contents .mypage .csvdl_area01{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:space-between; justify-content:space-between; align-items: center; margin: 0;padding: 0;} #contents .mypage .csvdl_area01 .csvdl01{ width: 75%;} #contents .mypage .csvdl_area01 .u_delete01{ width: 18%;} #contents .mypage .csvdl_area01 .btn_select_del02{ display: block; margin: 0; width: auto; padding: 4%;} /*マイページ　定型文管理*/ #contents .mypage .myage-teikeibox{background: #eee;padding: 2% 4%;border-radius: 4px;margin: 0 0 2vw;} #contents .mypage .myage-teikeibox form{ display:block;/*display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content:space-between;*/} #contents .mypage .myage-teikeibox .grp_select05{width: 100%; margin-bottom: 0;} #contents .mypage .myage-teikeibox form input{ display:block;/*display: flex; align-items: center;*/} #contents .mypage .myage-teikeibox form input[type="text"]{ width: 99%;} #contents .mypage .myage-teikeibox form input[type="submit"]{ height: 3em; padding: 0 2%; width:20%;} #contents .mypage .myage-teikeibox form input[type="file"]{ border: none; padding: 2% 0 1%; display: inline-block; width: auto; margin-bottom: 0;} #contents .mypage .myage-teikeibox form .file_txt{ width: 60%; display: inline-block;} #contents .mypage .myage-teikeibox02 form input[type="file"]{ border: none; padding: 2% 0; display: inline-block; width: auto;} #contents .mypage .myage-teikeibox02 form .file_txt{ width: 60%; display: inline-block; margin-bottom: 0;} #contents .mypage .myage-teikeibox02 form .file_txt .file_regi01{ padding: 1% 2%; background:#FF7588; color: #fff;} #contents .mypage .myage-teikeibox02 form .btn_update{ width: 20%;} #contents .mypage .myage-teikeibox02 form input[type="submit"]{ width: 20%;} #contents .mypage .myage-teikeibox02 form input[type="text"]{ width: 98.8%;} #contents .mypage .myage-teikeibox02 .group-list .group-name form:nth-child(1){ margin: 0;} #contents .mypage .myage-teikeibox02 .group-list .group-name form:nth-child(1) input[type="submit"]{ margin: 0;} #contents .mypage .myage-teikeibox02 .group-list .group-name form:nth-child(2){position: relative;} #contents .mypage .myage-teikeibox02 .group-list .group-name form:nth-child(2) input[type="button"]{ padding: 1%; position: absolute; left: 22%; bottom: 0.85em;} #contents .mypage .myage-teikeibox .s_gray_b,#contents .mypage .myage-teikeibox02 .s_gray_b {display: inline-block; width: auto;} #contents .mypage .myage-teikeibox .g-select01,#contents .mypage .myage-teikeibox02 .g-select01 {margin-bottom:1%; display: inline-block; width: 91%;} /*マイページ　現在のご利用状況*/ #contents .mypage .current_usage01{ margin: 2% 0 4%;padding:2%;} #contents .mypage .current_usage01 dt{ padding: 1.6% 2%; background:rgba(7, 68, 128,0.11) ; color: #002f6c; font-weight: 600; letter-spacing: .1em; font-size: 0.95em; } #contents .mypage .current_usage01 dt:before{ content: "●"; margin-right: 1%;} #contents .mypage .current_usage01 dd{padding: 2% 4%;background: rgba(255,255,255,1.0); font-size: 1.1em; color:#282929;} #contents .mypage .current_usage01 dd .uchiwake h4{ margin: 1% 0 .5% 0; width: 10%; } /*マイページ　端末情報一覧*/ #contents .mypage .device_list_wrap{ width: 100%;overflow-x: hidden;} #contents .mypage .device_list01{display: flex; width: 100%;} #contents .mypage .device_list01 li{ list-style: none; width: calc(100%/7); box-sizing: border-box; text-align: center; border-bottom: 1px solid #dedede; padding: 2% 0; font-size: 0.875em;} #contents .mypage .device_list01.komoku{ font-weight: 600; background: #ededed;} /*マイページ メッセージ送信*/ .send_msg_admin_wrap .msg_importance label{ padding: 0 4% 0 2%; width: 30%;} .send_msg_admin_wrap .msg_importance span.s_gray_b{ display:inherit; width: auto;} /*マイページ メッセージ管理*/ .grp_sortdate input{width: 48% !important; border: 1px solid #bbbbbb !important;} #rot01,#rot02,#rot03{width: 12.5%; margin: 1% 1% 1% 0; padding:0.5% 0;} #rot01 .txt10,#rot02 .txt10,#rot03 .txt10{display:inherit;visibility: visible;} /*お知らせ*/ /*#contents .setting .newslist{ font-size:16px; margin:0 0 30px;} #contents .setting .newslist dt{ padding:10px; border-radius:0; color: #fff; background: #005bb2; font-weight:600; margin:0;} #contents .setting .newslist dt span{ padding:3px 5px; color: #fff; background-color: #005bb2; margin:0 10px 0 0;font-weight:normal; font-size:12px;} #contents .setting .newslist dd{ background:#fff;}*/ /*運営者*/ #contents .company dl{ font-size:15px;} #contents .company dl dt{ padding:10px; /*background-color:#005bb2; color: #fff;*/margin:0;border-radius:0;} #contents .company dl dd{padding:2% 2%; margin:0 0 20px; /*background: #fff;*/} /*サービスご利用の流れ*/ #contents dl.service-flow:after{ display: block; content:"↓"; color: #fff; position:relative; bottom:20px; left:50%; line-height:1; font-size: 1.8em; background: #00bfa5; border-radius: 50%; width: 2%; height: 4%; text-align: center; padding: 0.8% 1.4% 0.8% 1.2%;} #contents dl.service-flow:nth-last-child(1):after{content: none;} #contents dl.service-flow dt{margin: 0; background:#005bb2; color:#fff; box-shadow: 2px 2px 3px rgba(0,0,0,0.1);padding:1.4% 2%;font-size: 1.1em;font-weight: bold; text-align: center;} #contents dl.service-flow dd.dd02 figure{width: 40%; display: block;} #contents dl.service-flow dd.dd02 .txt01{width: 55%;} #contents dl.service-flow dd.twocl .clmbox h3{text-shadow: none; color: #333; font-size: 1.2rem; height: auto; line-height: 150%; margin: 0 auto; padding:4% 2% 0 12%; width: 100%; display: block; position: relative;} /*サービスご利用の流れ3*/ #contents .service-flow03 li a{font-size: 1.1em; margin: 0 0 1%; color:#37474f;padding:2% 4% 2% 2%;} #contents .service-flow03 li a .goguide{ display: block; visibility: visible; position: absolute; right: 2%; top:25%; border-radius: 50px; color:#fff; font-size: 88%; padding: 0.5% 3% 0.5% 2%;background:#45556C;} #contents .service-flow03 li a:after{ content:none;} #contents .service-flow03 li a:hover .goguide{background-color:#fff; color: #005bb2;} #contents .service-flow03 li a .goguide:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f105"; position: absolute;top:14%; right: 7%;} /*サービスご利用の流れ 吹き出し*/ #contents .sf_bln{margin: 2% 0 4%;} #contents .sf_bln a{font-size: 1.2em; padding: 2%;} #contents .sf_bln a .goguide{ display: block; visibility: visible; border-radius: 50px; color:#fff; font-size: 80%; padding: 0.5% 3% 0.5% 2%; position: absolute; right: 2%; background:#45556C;} .forbuy_btn01{margin: 3% auto 5%;width: 80%;} .forbuy_btn01 a{padding: 2% 0.5em; font-size: 1em;} /* ステップバー1 */ .stepBar { position: relative; list-style: none; margin: 0 auto 3em; padding: 0; text-align: center; width: 100%; overflow: hidden; *zoom: 1; font-size:.9em; } .stepBar .step { position: relative; float: left; display: inline-block; line-height: 32px; padding: 0 40px 0 20px; background-color: #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .stepBar .step:before, .stepBar .step:after { position: absolute; left: -14px; display: block; content: ''; background-color: #eee; border-left: 4px solid #FFF; width: 38px; height: 38px; } .stepBar .step:after { top: 0; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .stepBar .step:before { bottom: 0; -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); } .stepBar .step:first-child { /* -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;*/ } .stepBar .step:first-child:before, .stepBar .step:first-child:after { content: none; } .stepBar .step:last-child { /* -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;*/ } .stepBar.step4 .step {width: 33.3%;} .stepBar .step strong{font-size: 120%;} /* ステップバー2 */ .stepBar2 { position: relative; list-style: none; margin: 0 0 1em; padding: 0; text-align: center; width: 100%; overflow: hidden; *zoom: 1; font-size:.9em; } .stepBar2 .step2 { position: relative; float: left; display: inline-block; line-height: 40px; padding: 0 40px 0 20px; background-color: #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .stepBar2 .step2:before, .stepBar2 .step2:after { position: absolute; left: -14px; display: block; content: ''; background-color: #eee; border-left: 4px solid #FFF; width: 20px; height: 20px; } .stepBar2 .step2:after { top: 0; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .stepBar2 .step2:before { bottom: 0; -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); } .stepBar2 .step2:first-child { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .stepBar2 .step2:first-child:before, .stepBar2 .step2:first-child:after { content: none; } .stepBar2.step:last-child { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .stepBar2.step44 .step2 { width: 24.55%; } #contents .sf_bln a:after{ content:none;} #contents .sf_bln a:hover .goguide{background-color:#fff; color: #005bb2;} #contents .sf_bln a .goguide:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f105"; position: absolute; right: 6%;} /*ガイド　タイトル*/ .ttl_guide{display: block; width: 40%; margin: 0 auto 1%; background: #002f6c; color: #fff; padding: 1% 0; border-radius: 50px; font-size:1.0rem;} .ttl_guide_planname{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content:center; width: 35%; margin: 1% auto;} .ttl_guide_planname li{ width: auto; font-size:0.75rem; font-weight: normal; color: #fff; padding: 1% 4%; border-radius: 50px;} .plan_m{background: #50C7C6;} .plan_a{background: #75CFEE;} .plan_o{background: #F9CC50;} /*ガイド　リード分*/ .gde_lead_mng{ background: rgba(0, 91, 178, 0.1); color: #002f6c; padding: 3%; font-size:0.95rem; width: 90%; margin: 0 auto; } .gde_lead_mng_box{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between; margin: 2% 0 0;} .gde_lead_mng_box li{ width: calc(98%/2); padding: 1%; border: 1px solid #002f6c; font-size:0.85rem; margin: 0; } .gde_lead_mng_box p{ margin: 0 0 1%; } .ttl_guide_planname2{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content:flex-start;margin: 1% auto 2%;} .ttl_guide_planname2 li{ width: auto; margin: 0 1% 0 0; font-size:0.75rem; font-weight: normal; color: #fff; padding: 1% 4%; border-radius: 50px; border: none;} /*ガイド　1カラム*/ #contents dl.service-flow dd.onecl figure{width: 100%; justify-content: center; align-items: center; margin: 2% auto; text-align: center;} #contents dl.service-flow dd.onecl .txt01{width: 100%; text-align: center;} #contents dl.service-flow dd.onecl figure .fig1,#contents dl.service-flow dd.onecl figure .fig2{width: calc(60%/2);} #contents dl.service-flow dd.onecl figure .fig2 img{width: 90%; height: auto; margin: 6% 0;} /*ガイド　1カラム 50％*/ #contents dl.service-flow dd .onecl .clmbox{width: 50%;margin: 0 auto;} /*ガイド　2カラム ddにclass*/ #contents dl.service-flow dd.twocl{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content:flex-start; padding: 1% 0 0;} #contents dl.service-flow dd.twocl .clmbox{width: calc(100%/2); position: relative; margin: 0;} #contents dl.service-flow dd.twocl .clmbox figure{width: 80%; margin: 0 auto; padding: 4%; text-align: center;} #contents dl.service-flow dd.twocl .clmbox figure img{ margin: 0 auto 1%;} #contents dl.service-flow dd.twocl .clmbox .txt01{width: 100%; padding: 0 4% 4%;} /*ガイド　2カラム dd内のdivなどにclass*/ #contents dl.service-flow dd .twocl{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content:flex-start; padding: 1% 0 0;} #contents dl.service-flow dd .twocl .clmbox{width: calc(100%/2); position: relative; margin: 0;} #contents dl.service-flow dd .twocl .clmbox figure{width: 80%; margin: 0 auto; padding: 4%; text-align: center;} #contents dl.service-flow dd .twocl .clmbox figure img{ margin: 0 auto 1%;} #contents dl.service-flow dd .twocl .clmbox .txt01{width: 100%; padding: 0 4% 4%;} /*ガイド　フォント*/ #contents dl.service-flow .tt_g90{ font-size: 90%; color: #686868;} #contents dl.service-flow .tt_g90_2{ font-size: 90%; color: #a9a9a9; margin: 1% 0;} #contents dl.service-flow .tt_g90_bg{ font-size: 88%; margin: 2% 0; padding: 3%; background: #f2f2f2;color: #686868;} /*ガイド　ボトムナビ*/ .guide_btmnavi{ margin: 0 auto 8vw;} /*Information*/ p.message01{ display:block; text-align:center; padding:20px; font-size:16px;} p.message01 a{background-color: #4374d7;border-radius: 0;/*box-shadow: 2px 2px 2px #484848;*/box-sizing: border-box;color: #fff;display: block;font-size: 16px;font-weight: 500;margin: 30px auto;padding: 10px;text-align: center;text-decoration: none;width: 230px;} p.message01 a:hover { background-color:#4F8AFF;} p.message01 a.helpbtn01{background-color: #4374d7;border-radius: 6px;box-shadow: 2px 2px 2px #484848;box-sizing: border-box;color: #fff;display: block;font-size: 18px;font-weight: bold;margin: 30px auto;padding: 10px;text-align: center;text-decoration: none;width: 230px;} /*help*/ .help{ margin:0 0 0 -80px;} .help li{ display:block; float:left; width:460px; padding:20px; box-sizing:border-box; background-color: #dacccd; border-radius: 6px; margin:0 0 80px 80px;} .help li h4{ display:block; font-size:21px; margin:0 0 5px; font-weight:bold; text-align:center;} .help li p{ display:block; text-align:center; margin:0 0 20px;} /*お問い合わせ*/ #contents .contact .contactmenu{ text-align:center; margin:0 0 20px;} #contents .contact .contactmenu li{ display:inline-block;} #contents .contact .contactmenu li a{ display:block; margin:0; background-color:#50C7C6; padding:10px 15px;; color:#fff; text-decoration:none;} #contents .contact .contactmenu li a:hover{ background-color:#4374d7;text-decoration:none;} /* 登録フロー */ .entry_flow {margin-bottom:40px; font-size:1.0em; -webkit-justify-content:center; justify-content:center; width: 80%; margin: 0 auto 4%;} .entry_flow .step { width:33%; padding:0.5em 2.5em 0.5em 0.5em;} .entry_flow .step03 {padding:0.5em 2em;} /* 地図情報 */ .maparea_wrap{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;} .maparea_wrap .map_viewarea01{ width: 68%;} .maparea_wrap .map_msgarea01{ width: 30%; height: 640px; overflow-x: scroll;} .maparea_wrap .map_msgarea01 .msg_list_div{width:100%;height:auto;overflow:hidden;margin:0 0 2%;border:solid 1px #ccc;padding:10px; background: #fff;} .maparea_wrap .map_msgarea01 .msg_list_div .s_gray{font-size: 90%; color:#6e6e6e; margin-right: 1.8%;} .maparea_modal__content img{width: 600px; height: auto;} /*メッセージ管理*/ .history_adm_searcharea{ background: #eee; padding: 2% 2%; border-radius: 2px; margin: 0 0 2vw;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont .bodyimg img{ width: 300px; height: auto;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont .dlbtn a{display: block; width: 20%; padding: 1%; color: #fff; background:#fd9367; border-radius: 2px; text-align: center; font-size: 80%; margin:1% 0;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont{ width: 80%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte{width: 16%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .select_del:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content:"\f00c"; margin-right:4px; font-size: 90%;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .select_del{ display: block; align-items: center; width: 80%; text-align: center;} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .input_select_del{ display: flex; align-items: center; width: 20% !important; margin: 0 !important; padding: 0 !important; transform: scale(1.4);} .history_adm_wrap .history_adm_cont_wrap .history_adm_cont_delte .select_del_wr{display: -webkit-flex; display: flex; /*-webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content:space-between;*/ align-items: center; padding: 2% 0;} /*商品*/ .results_wrap.flex{ display: flex; flex-wrap: wrap; /*align-items: center;*/ justify-content:flex-start;width: calc(100% + 30px); overflow: hidden;} .products_box { /*width: calc(90%/3); margin-right: 1%; margin-bottom: 2%;*/ width:calc(33.3333% - 30px); margin: 0 30px 30px 0;font-feature-settings: "palt";} .products_box:nth-child(3n) { margin-right: 0;} .products_dtl{} #product_main{ width: 50%; margin-bottom: 0;} .product_catch h3{ height: auto; line-height: 180%;} #product_side{ width: 40%;} #product_side .cart01 input[type="number"]{ width: 50%;} #main_wide{ margin: 2% auto;} #main_wide h3{ height: auto; line-height: 180%;} /*.cart_item{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 2%;} .cart_item figure{ background: #fff; padding: 4%;}*/ .order_price{ text-align: right;} .order_price dl{ display: flex; align-items: center; justify-content: flex-end; } .order_price dt{} .order_price dd{} .submitBtn{ display:flex;lign-items: center; justify-content: space-between;} .submitBtn li:first-of-type a, .submitBtn li:first-of-type input {display:block; background-color:#fff; width:24vw !important; color:#0d97ff; padding:1.15em 0 !important; text-align:center; margin: 4vw auto !important;border-radius: 2px !important; border: 1px solid #41adff !important;} .submitBtn li:first-of-type a:hover, .submitBtn li:first-of-type input:hover {background-color:#0d97ff;border: 1px solid #41adff; color: #fff;} .submitBtn li:last-of-type a, .submitBtn li:last-of-type input {display:block; background-color:#0d97ff; width:24vw !important; color:#fff; padding:1.15em 0 !important; text-align:center; margin: 4vw auto !important;border-radius: 2px !important; border: 1px solid #41adff !important;} .submitBtn li:last-of-type a:hover, .submitBtn li:last-of-type input:hover {background-color:#fff;background: #fff; border: 1px solid #41adff; color: #41adff;} .delete_btn{position:relative;} .delete_btn button{ padding: 1% 2% !important; margin: 1% 1% 2% 1% !important; position: relative; right: 0; top:0; font-size: 0.8em !important; background: #7D7979 !important; width: 60% !important; border: 1px solid #7D7979;} /*商品タグ*/ .pd_taglist{ display: block;width: 100%; margin-bottom: 2%;font-feature-settings: "palt";} .pd_taglist a{ display: inline-block; padding: .4% 2%; font-size: 0.8em; border-radius: 50px; background-color: rgba(69, 85, 108,1); color: #fff; margin: auto;} .pd_taglist span.flt{display: inline-block; font-size: 0.8em;color:rgba(69, 85, 108,1); font-weight: 600; } .products_box [class^="cate_"]{ display:inline-block; padding: .6% 3%; font-size: 0.7em; border-radius: 50px; background-color: rgba(69, 85, 108,.8); color: #fff; margin: 3% 0 1%;line-height:inherit;} /*商品詳細用画像*/ .pd_dtl_imglist{ display: flex; align-items: center; justify-content:flex-start; flex-wrap: wrap;} .pd_dtl_imggazo{ width: 160px; height: auto; border:1px solid rgba(204, 204, 204,0.6); margin:0 10px 10px 0;} .pd_dtl_imggazo img{ width: 100%; height: auto;} /* レイアウトタイプ01 */ form.type01 {width:100%; margin:1em auto 2em; padding:2em;} form.type01 dt {width:20%; float:left; margin-bottom:20px;} form.type01 dd {width:80%; float:left; margin-bottom:20px;} form.type01 input{padding:10px; color:#333;} form.type01 input#coupon{width:30%; padding:5px;} form.type01 select {padding: 8px 15px 8px 5px;color: #333;font-size:14px;} #btn_copyod{background:#E85153; color: #fff; padding: 6px 10px; width: 30%; margin: 0 0 20px auto; text-align: center; cursor: pointer;} /* 注文内容の確認 */ .validation{width:98%; margin:1em auto; padding:2em; box-sizing:border-box;} .receiver_info{width:100%; margin-bottom:2em; display:flex; display:-ms-flexbox; display:-webkit-box; display:-webkit-flex; flex-wrap:wrap;} .receiver_info dt{border-bottom:1px solid #ccc; padding:10px; box-sizing:border-box; font-weight:bold; width:20%;} .receiver_info dd{border-bottom:1px solid #ccc; padding:10px; width:80%} /* 注文履歴一覧 */ /* テーブル２ */ .tbl02 {border-collapse: collapse; border-spacing: 0;} .tbl02 thead {display:table-header-group;} .tbl02 th {padding:0.75em 0.25em; background-color:#263768; color:#fff; } .tbl02 tr {display:table-row; padding:0; border:none;} .tbl02 td {display:table-cell; padding:1.25em 0.25em !important; text-align:center; border-bottom:1px solid #aaa !important;} .tbl02 td:before {display:none;} .tbl02 td.row2 {min-height:inherit;} /*導入事例*/ .case_info{display: flex; flex-wrap: wrap; align-items: center; justify-content:space-between; background:rgba(0, 91, 178, 0.1); font-size: 1em; text-shadow: none; color: #222; width: 100%; height: auto; line-height: 100%; font-weight: normal; padding: 3% 6%;} .case_info .logo{ width: 20%; background: #fff;} .case_info .info{ width: 75%;} .case_info .info dl{display: flex; flex-wrap: wrap; align-items: center; justify-content:flex-start; font-size: 0.9em;} .case_info .info dt{ width: 16%; text-align: left; padding: .6%; color: #002f6c;font-weight: 600;} .case_info .info dd{ width: 82%; text-align: left;padding: 1%;} .contwrap{ margin: 2vw 0; line-height: 160%; background: #fff; padding: 2% 6% 4%;} .contwrap h3{display: block; width: 100%; padding: 4% 0 2%; text-shadow: none; color: #002f6c; height: auto; line-height: 140%; font-size: 1.6em; border-bottom: 1px solid #002f6c; margin-bottom: 4%;} .fig1{display: block;width: 46%; margin: 0 auto 8%;} .fig2{display: block;width: 46%; margin: 0 auto 8%;} /*.fig2{display: flex; flex-wrap: wrap; align-items: center; justify-content:space-between;width: 100%; margin: 0 auto 8%;} */ .fig2 figure{ width: 48%;} .contwrap .txtarea{} .contwrap .txtarea p{margin: 0 0 4%;} .contwrap .txtarea h4{display: block; width: 100%; padding:0 2%; text-shadow: none; color: #222; height: auto; line-height: 140%; font-size: 1.15em; margin-bottom: 2%;} .contwrap .txtarea h4 span{ display: inline-block; margin-right: 2%; color: rgba(0, 91, 178, 0.7);} .contwrap .contbox_li li{ display: flex; align-items:flex-start; padding: 0 2%;} .contwrap .contbox_li li:before{ content: "●"; color: rgba(0, 91, 178, 0.7); font-size: 0.5em; margin-right: 1%;} .contgrid{display: flex; flex-wrap: wrap; align-items: center; justify-content:flex-start; font-size: 0.9em; border-bottom: 1px solid rgba(0, 91, 178, 0.5);} .contgrid:first-child{ border-top: 2px solid rgba(0, 91, 178, 0.5); margin-top: 4%;} .contgrid:nth-child(3){border-bottom: 2px solid rgba(0, 91, 178, 0.5); margin-bottom: 4%;} .contgrid .cgrid_ttl{ width: 8%; text-align: center; padding: 1%; font-weight: 600;color: #222;font-size: 1.15em; } .contgrid .cgrid_txt{ width: 91%; text-align: left;padding: 1%;} } @media screen and (min-width : 1024px) { /* -------------------------------------------------- Gナビ -------------------------------------------------- */ /*#g_navi {display:block !important; position:relative; float:right; box-shadow:none; width:83%; top:20px; padding: 0;}*/ #g_navi {display: flex;width: 83%;justify-content: flex-end;align-items: center; padding: 0; top:0; background: none; box-shadow: none;} #g_navi ul{display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:space-around; justify-content:space-around; width: 100%; align-items:baseline;} #g_navi ul li{ margin-left: 0;} #g_navi ul li a{ white-space: nowrap; font-size: 0.9rem;} /*hover*/ #g_navi li:after {position:absolute; top:0; right:0; display:block; content:""; width:1px; height:14px; /*background-color:#fff;*/} #g_navi a:after {opacity:0; content:""; display:block; width:0; height:1px; background-color:rgba(34, 34, 34,0.4); margin:6px auto 0; -webkit-transition: all 0.25s cubic-bezier(.25,.1,.25,1); transition: all 0.25s cubic-bezier(.25,.1,.25,1);} #g_navi a:hover:after {width:100%; opacity:1;} /*アカウント登録、ログイン*/ #g_navi li.btn33,#g_navi li.btn44{ display: inline-block; padding:0 !important; margin: 0; position: relative; width: auto !important; border: none !important; } #g_navi li:nth-child(6){ margin: 0 !important;} #g_navi li.btn33 a,#g_navi li.btn44 a{ display: block; padding: 10% 0 10% 0;border-radius: 2px;position: relative;background:rgba(255, 255, 255,0.5);border: 1px solid #005fc4;margin: 0 0 0 1%; color: #005fc4; text-align: center; width: 140px;} /*#g_navi li.btn33{padding: 1.2% 1.9% 0.8% 1%; border-radius: 2px; position:relative; background: #fff;border: 1px solid #1e88e5; width: auto; margin: 0 0 0 2.2%;} #g_navi li.btn33 a{color: #1e88e5;}*/ /*#g_navi li:hover:nth-last-child(3) a{background:rgba(217, 242, 251, 0.5);}*/ #g_navi li a:hover{background:rgba(217, 242, 251, 0.5);} #g_navi li.btn33 a:after{display: none;} #g_navi li.btn33 a:hover:after{display: none;} /*言語*/ #g_navi li.btn44 a{color: #008e76;} #g_navi li.btn44:hover:last-child a{background:rgba(190, 250, 222, 0.5);} #g_navi li.btn44:last-child a:hover:after{display: none;} } @media print, screen and (min-width : 1260px) { #g_navi {width:74%;} } /* -------------------------------------------------- 1320px〜　PC -------------------------------------------------- */ @media screen and (min-width : 1320px) { /* センター揃え */ .center {text-align:center;} } @media print, screen and (min-width : 1460px) { #g_navi {width:64%;} }