jscss
tc.css
/*基本設定ここから*/
.tc { max-width: 980px; margin: 0px auto; /*text-align:center;*/}
/*画像共通*/
.tc img { margin: 0 auto; display: block;}
/*要素の余白*/
.fit_t {padding-top:0 !important;}
.fit_b {padding-bottom:0 !important;}
.fit_r {padding-right:0 !important;}
.fit_l {padding-left:0 !important;}
.fit_all {padding:0 !important;}
/*幅別の要素の余白*/
/*PC*/
@media screen and (min-width:1025px) {
.fit_t_pc {padding-top:0 !important;}
.fit_b_pc {padding-bottom:0 !important;}
.fit_r_pc {padding-right:0 !important;}
.fit_l_pc {padding-left:0 !important;}
.fit_all_pc {padding:0 !important;}
}
/*SP&TB*/
@media screen and (max-width:1024px) {
.fit_t_sp {padding-top:0 !important;}
.fit_b_sp {padding-bottom:0 !important;}
.fit_r_sp {padding-right:0 !important;}
.fit_l_sp {padding-left:0 !important;}
.fit_all_sp {padding:0 !important;}
}
/*テキスト赤文字*/
.tc strong {color: red;font-weight: normal;}
/*ボックス*/
.tc_box { width:100%; max-width:980px; margin: 0 auto; padding:20px; box-sizing:border-box;}
@media screen and (max-width:1024px) {
.tc_box { margin: 0 auto; padding:10px;}
}
@media screen and (max-width:640px) {
.tc_box { margin: 0 auto; padding:2%;}
}
/*インナー*/
.tc_inner { width:100%; padding:0 20px 20px; box-sizing:border-box;}
.tc_inner:first-child { padding:20px;}
:not(.tc_inner)+.tc_inner { padding:20px;}
@media screen and (max-width:1024px) {
.tc_inner { padding:0 10px 10px;}
.tc_inner:first-child { padding:10px;}
:not(.tc_inner)+.tc_inner { padding:10px;}
}
@media screen and (max-width:640px) {
.tc_inner { padding:0 2% 2%;}
.tc_inner:first-child { padding:2%;}
:not(.tc_inner)+.tc_inner { padding:2%;}
}
/*インナーの子要素*/
.tc_inner>div { width:100%; padding:0 20px 20px; box-sizing:border-box;}
.tc_inner>div:first-child { padding:20px;}
.tc_inner>:not(div)+div{ padding:20px;}
@media screen and (max-width:1024px) {
.tc_inner>div { padding:0 10px 10px;}
.tc_inner>div:first-child { padding:10px;}
.tc_inner>:not(div)+div{ padding:10px;}
}
@media screen and (max-width:640px) {
.tc_inner>div { padding:0 2% 2%;}
.tc_inner>div:first-child { padding:2%;}
.tc_inner>:not(div)+div{ padding:2%;}
}
/*テキスト*/
.tc_txt { width:100%; /*font-size:123%;*/ line-height: 1.8em; padding:0 20px 20px; text-align: left; text-align: justify; text-justify: inter-ideograph; overflow: hidden; box-sizing:border-box;}
.tc_txt:first-child { padding:20px;}
:not(.tc_txt)+.tc_txt { padding:20px;}
@media screen and (max-width:1024px) {
.tc_txt { padding:0 10px 10px;}
.tc_txt:first-child { padding:10px;}
:not(.tc_txt)+.tc_txt { padding:10px;}
}
@media screen and (max-width:640px) {
.tc_txt { padding:0 2% 2%;}
.tc_txt:first-child { padding:2%;}
:not(.tc_txt)+.tc_txt { padding:2%;}
}
@media screen and (max-width:640px) {
.tc_txt { /*font-size:108%;*/}
}
/*導線上下の余白*/
.tc_btn { margin: 20px auto;}
@media screen and (max-width:1024px) {
.tc_btn { margin: 10px auto;}
}
@media screen and (max-width:640px) {
.tc_btn { margin: 2% auto;}
}
/*段落上下の余白*/
.par_t { margin-top: 40px;}
.par_b { margin-bottom: 40px;}
@media screen and (max-width:1024px) {
.par_t_d1024-320,
.par_t { margin-top: 4%;}
.par_b_d1024-320,
.par_b { margin-bottom: 4%;}
}
/*シャドウ*/
.tc .sdw{ box-shadow: 3px 3px 2px 0px #9d9d9d;
-moz-box-shadow: 3px 3px 2px 0px #9d9d9d;
-webkit-box-shadow: 3px 3px 2px 0px #9d9d9d;
-ms-box-shadow: 3px 3px 2px 0px #9d9d9d;}
/*吹き出し用シャドウ*/
.tc .sdw.tc_balloon:after { box-shadow: 2px 3px 2px 0px #9d9d9d;
-moz-box-shadow: 2px 3px 2px 0px #9d9d9d;
-webkit-box-shadow: 2px 3px 2px 0px #9d9d9d;
-ms-box-shadow: 2px 3px 2px 0px #9d9d9d;
}
/*テキスト右側 sp画像w50%表示*/
.txt_r_1per2 p img { float: left; width: auto !important; margin: 0 20px 20px 0;}
/*テキスト右側 sp画像w33%表示*/
.txt_r_1per3 p img { float: left; width: auto !important; margin: 0 20px 20px 0;}
/*テキスト左側 sp画像w50%表示*/
.txt_l_1per2 p img { float: right; width: auto !important; margin: 0 0 20px 20px;}
/*テキスト左側 sp画像w33%表示*/
.txt_l_1per3 p img { float: right; width: auto !important; margin: 0 0 20px 20px;}
@media screen and (max-width:1024px) {
.txt_r_1per2 p img,
.txt_l_1per2 p img { max-width: 50% !important;}
.txt_r_1per2 p img,
.txt_r_1per3 p img { margin: 0 10px 10px 0;}
.txt_l_1per2 p img,
.txt_l_1per3 p img { margin: 0 0 10px 10px;}
}
@media screen and (max-width:640px) {
.txt_r_1per2 p img,
.txt_r_1per3 p img { margin: 0 2% 2% 0;}
.txt_l_1per2 p img,
.txt_l_1per3 p img { margin: 0 0 2% 2%;}
}
@media screen and (max-width:640px) {
.txt_r_1per3 p img,
.txt_l_1per3 p img { max-width: 30% !important;}
}
.htag_l h2 img,
.htag_l h3 img,
.htag_l h4 img,
.htag_r h2 img,
.htag_r h3 img,
.htag_r h4 img { display: inline;}
/*hタグ左側*/
.htag_l h2,
.htag_l h3,
.htag_l h4 { text-align: left;}
.htag_l p img { float: right; width: auto !important; margin: 0 0 20px 20px;}
/*hタグ右側*/
.htag_r h2,
.htag_r h3,
.htag_r h4 { text-align: right;}
.htag_r p img { float: left; width: auto !important; margin: 0 20px 20px 0;}
@media screen and (max-width:1024px) {
.htag_l p img { margin: 0 0 10px 10px;}
.htag_r p img { margin: 0 10px 10px 0;}
}
@media screen and (max-width:640px) {
.htag_l p img { margin: 0 0 2% 2%;}
.htag_r p img { margin: 0 2% 2% 0;}
}
.htag_l .tc_txt,
.htag_r .tc_txt { overflow: visible;}
/*導線テンプレート用、等分テンプレート用共通*/
.tc .cnt_box_inner { max-width: 980px; padding: 0 10px; box-sizing: border-box;}
.tc .is_1per1 div { padding: 0 10px;}
@media screen and (max-width:1024px) {
.tc .cnt_box_inner,
.tc .is_1per1 div { padding: 0 1%;}
}
/*2,3,4カラム*/
.tc .is_1per2 li,
.tc .is_1per3 li,
.tc .is_1per4 li { padding: 0 10px;}
.tc .is_1per3 li { width : 33.33333% ; width : -webkit-calc(100% / 3) ;}
@media screen and (max-width:1024px) {
.tc .is_1per2 li,
.tc .is_1per3 li,
.tc .is_1per4 li { padding: 0 1%;}
}
@media screen and (max-width:640px) {
.tc .is_1per4 li { margin-bottom: 2%;}
.tc .is_1per4 li:last-child,
.tc .is_1per4 li:nth-last-child(2) { margin-bottom: 0;}
}
/*2,3カラム リキッド*/
@media screen and (max-width:640px) {
.tc .is_1per2.tc_riquid li,
.tc .is_1per3.tc_riquid li { width: 100%; float:none;}
}
/*基本設定ここまで*/
/*パターン10ここから*/
/*
.tc_temp .tc_box_10.tc_balloon .tc_inner,
.tc_temp .tc_box_10.tc_balloon:before,
.tc_temp .tc_box_10.tc_balloon:after { background-color:#f90;}
.tc_balloon { padding: 0 !important; position: relative;}
.tc_balloon:before,
.tc_balloon:after {
content: " ";
position: absolute;
width: 140px;
height: 140px;
left: 50%;
bottom: -50px;
margin-left: -70px;
z-index: 2;
-webkit-transform: rotate(-40deg) skew(11deg);
-moz-transform: rotate(-40deg) skew(11deg);
transform: rotate(-40deg) skew(11deg);
}
.tc_balloon:after { z-index: 1;}
.tc_balloon .tc_inner { margin-bottom: 70px; position: relative; z-index:3;}
.tc_balloon .tc_inner>div { background-color:#fff;}
@media screen and (max-width:640px) {
.tc_balloon:before,
.tc_balloon:after {bottom: -10px;}
.tc_balloon .tc_inner { margin-bottom: 30px;}
}
*/
/*パターン10ここまで*/
/*チェックボックス ここから*/
.tc_cbox li{ text-align: left; box-sizing: border-box; list-style-type:none; background-repeat:no-repeat;
/*.background-image:url("https://www.toivo.co.jp/images/tc/cbox_mark.jpg");*/
background-position:left 0em;
width: 100%; margin: 1% auto; padding-left:8%; font-size: 230%; background-size: 53px auto; font-weight: bold; color: #323232;
}
@media screen and (max-width:1024px) {
.tc_cbox li { font-size:200%; background-size: 7% auto;}
}
@media screen and (max-width:640px) {
.tc_cbox li { width:84%; font-size:150%;}
}
@media screen and (max-width:480px) {
.tc_cbox li { font-size:105%;}
}
/*チェックボックス ここまで*/
/*パターン15ここから*/
.tc_amamori .qa_box { margin-top:40px; padding: 0 0 0 20px;}
.tc_amamori .qa_box .tc_inner { background: #d5eaed; border-radius: 7px;}
.tc_amamori .qa_box .tc_txt { padding: 10px 0 0;}
.tc_amamori .qa_box h3 img { max-width: 71% !important; margin-right: 13%; display: inline;}
.tc_amamori .qa_box .tc_txt img { max-width: 19% !important; margin: -90px 20px 0 -40px;}
.tc_amamori .qa_box .tc_txt .font_01 {
color:#fff; font-size:160%; font-weight: bold;
filter:dropshadow(color=#0c3161,offX= 0,offY=-1)
dropshadow(color=#0c3161,offX= 1,offY= 0)
dropshadow(color=#0c3161,offX= 0,offY= 1)
dropshadow(color=#0c3161,offX=-1,offY= 0);
-webkit-text-stroke-color: #0c3161;
-webkit-text-stroke-width: 1px;
text-shadow: #0c3161 1px 1px 0px, #0c3161 -1px 1px 0px,#0c3161 1px -1px 0px, #0c3161 -1px -1px 0px;
}
.tc_amamori .qa_box .tc_txt .font_02 { color:#0a75a8; font-size:130%; font-weight: bold; }
@media screen and (max-width:1024px) {
.tc_amamori .qa_box { margin-top:4%; padding: 0 2%;}
.tc_amamori .qa_box .tc_txt { padding: 1% 0 0;}
.tc_amamori .qa_box h3 img { margin-right: 12%;}
.tc_amamori .qa_box .tc_txt img { margin: -9% 2% 0 -4%;}
}
@media screen and (max-width:640px) {
.tc_amamori .qa_box { margin-top:5%;}
.tc_amamori .qa_box .tc_txt { padding: 0;}
.tc_amamori .qa_box .tc_txt img { max-width: 40% !important; margin: -5% 2% 2% -4%;}
.tc_amamori .qa_box .tc_txt>span.d640-320 { margin-bottom: 1%;}
}
/*パターン15ここまで*/
/*パターン16ここから*/
.tc_shindan .qa_box h3 { text-align:left; background: transparent url("https://www.toivo.co.jp/images/tc/bg_shindan_01.jpg") repeat scroll 0px 0px;}
.tc_shindan .qa_box .tc_inner>div { margin-bottom: 20px; border-radius: 5px; border-bottom:4px solid #dbdbdb; background: transparent url("https://www.toivo.co.jp/images/tc/bg_shindan_02.jpg") repeat scroll 0px 0px;}
.tc_shindan .qa_box .tc_txt img { margin-bottom: 1%; margin-left: 0;}
@media screen and (max-width:1024px) {
.tc_shindan .qa_box .tc_inner>div { margin-bottom: 2%;}
}
@media screen and (max-width:640px) {
.tc_shindan .qa_box .tc_txt img { width: 7%; float: left;}
.tc_shindan .qa_box .font_01 { width: 92%; margin: 1% 0px 2% 1%; min-height: 42px; font-size: 130%; font-weight: bold; color: #f73f0e; float: left;}
}
/*パターン16ここまで*/
/*以下、elementor調整用
------------------------------------------------------------*/
/*.elementor-widget-container .tc_box {margin: 0 auto;}*/
/*画像 テキスト 縦並び*/
.txt_img_100 img{margin-bottom: 20px;}
@media screen and (max-width:640px) {
.txt_img_100 img{margin-bottom: 2%;}
}
.htag_l h5 img,
.htag_r h5 img { display: inline;}
/*hタグ左側*/
.htag_l h5 { text-align: left;}
.htag_l p img { float: right; width: auto !important; margin: 0 0 20px 20px;}
/*hタグ右側*/
.htag_r h5 { text-align: right;}
.htag_r h2 img, .htag_l h2 img,
.htag_r h3 img, .htag_l h3 img,
.htag_r h4 img, .htag_l h4 img,
.htag_r h5 img, .htag_l h5 img{ max-width: 74% !important; display: inline;}
.htag_r .tc_txt img, .htag_l .tc_txt img{ max-width: 22% !important; margin-top: -10%;}
/*診断チェックボックスここから*/
.tc_shindan_ck_box .tc_txt{font-size: 190%;font-weight: bold;text-align: center;}
.tc_shindan_ck_box { margin-bottom:0; background: transparent url("https://www.toivo.co.jp/images/tc/bg_shindan_03.jpg") repeat scroll 0px 0px;}
.tc_shindan_ck_box .tc_txt { font-size: 190%; font-weight: bold; text-align: center;}
/*.tc_shindan_ck_box .tc_cbox li { background-image: url("https://www.toivo.co.jp/images/tc/shindan_cbox_03.png");}*/
@media screen and (max-width: 1024px){
.tc_shindan_ck_box .tc_txt {text-align: left;}
}
@media screen and (max-width: 640px){
.tc_shindan_ck_box .tc_txt {font-size: 110%;}
}
/*診断チェックボックスここまで*/
/*吹き出し ここから*/
.tc_balloon { padding: 0 !important; position: relative;}
.tc_balloon:before,
.tc_balloon:after {
content: " ";
position: absolute;
width: 140px;
height: 140px;
left: 50%;
bottom: -50px;
margin-left: -70px;
z-index: 2;
-webkit-transform: rotate(-40deg) skew(11deg);
-moz-transform: rotate(-40deg) skew(11deg);
transform: rotate(-40deg) skew(11deg);
}
.tc_balloon:after { z-index: 1;}
.tc_balloon>*:last-child{ margin-bottom: 70px; position: relative; z-index:3;}
@media screen and (max-width:640px) {
.tc_balloon:before,
.tc_balloon:after {bottom: -10px;}
.tc_balloon>*:last-child { margin-bottom: 30px;}
}
/*吹き出し ここまで*/
/*角丸*/
.rad_5{border-radius: 5px;}
.rad_10{border-radius: 10px;}
.rad_5_t{border-radius: 5px 5px 0 0;}
.rad_10_t{border-radius: 10px 10px 0 0;}
.rad_5_b{border-radius: 0 0 5px 5px;}
.rad_10_b{border-radius: 0 0 10px 10px;}
/*shindan_qaここから*/
.tc_shindan_qa_box h3 { text-align:left; background: transparent url("https://www.toivo.co.jp/images/tc/bg_shindan_01.jpg") repeat scroll 0px 0px;}
.tc_shindan_qa_box .tc_inner { margin-bottom: 20px; border-radius: 5px; border-bottom:4px solid #dbdbdb; background: transparent url("https://www.toivo.co.jp/images/tc/bg_shindan_02.jpg") repeat scroll 0px 0px;}
.tc_shindan_qa_box .tc_txt img { margin-bottom: 1%; margin-left: 0;}
.tc_shindan_qa_box h3 img {margin: 0 auto 0 0;}
@media screen and (max-width:1024px) {
.tc_shindan_qa_box .tc_inner { margin-bottom: 2%;}
}
@media screen and (max-width:640px) {
.tc_shindan_qa_box .tc_txt img { width: 7%; float: left;}
.tc_shindan_qa_box .font_01 { width: 92%; margin: 1% 0px 2% 1%; min-height: 42px; font-size: 130%; font-weight: bold; color: #f73f0e; float: left;}
}
/*shindan_qaここまで*/
/*amamori_qa ここから*/
.tc_amamori_qa_box { margin-top:40px; padding: 0 0 0 20px;}
.tc_amamori_qa_box .tc_inner { background: #d5eaed; border-radius: 7px;}
.tc_amamori_qa_box .tc_txt { padding: 10px 0 0;}
.tc_amamori_qa_box h3 img { max-width: 71% !important; margin-right: 13%; display: inline;}
.tc_amamori_qa_box .tc_txt img { max-width: 19% !important; margin: -90px 20px 0 -40px;}
.tc_amamori_qa_box .tc_txt .font_01 {
color:#fff; font-size:160%; font-weight: bold;
filter:dropshadow(color=#0c3161,offX= 0,offY=-1)
dropshadow(color=#0c3161,offX= 1,offY= 0)
dropshadow(color=#0c3161,offX= 0,offY= 1)
dropshadow(color=#0c3161,offX=-1,offY= 0);
-webkit-text-stroke-color: #0c3161;
-webkit-text-stroke-width: 1px;
text-shadow: #0c3161 1px 1px 0px, #0c3161 -1px 1px 0px,#0c3161 1px -1px 0px, #0c3161 -1px -1px 0px;
}
.tc_amamori_qa_box .tc_txt .font_02 { color:#0a75a8; font-size:130%; font-weight: bold; }
@media screen and (max-width:1024px) {
.tc_amamori_qa_box { margin-top:4%; padding: 0 2%;}
.tc_amamori_qa_box .tc_txt { padding: 1% 0 0;}
.tc_amamori_qa_box h3 img { margin-right: 12%;}
.tc_amamori_qa_box .tc_txt img { margin: -9% 2% 0 -4%;}
}
@media screen and (max-width:640px) {
.tc_amamori_qa_box { margin-top:5%;}
.tc_amamori_qa_box .tc_txt { padding: 0;}
.tc_amamori_qa_box .tc_txt img { max-width: 40% !important; margin: -5% 2% 2% -4%;}
.tc_amamori_qa_box .tc_txt>span.d640-320 { margin-bottom: 1%;}
}
/*amamori_qaここまで*/
/*参考情報 ここから*/
.tc_sankou h2 {text-align: left;font-size: 32px;font-weight: normal;}
.tc_sankou .tc_inner {border: 1px solid #000;}
.tc_sankou ul li:before {content: "注意"; color: #f00;}
.tc_sankou ul li {margin: 0.5% auto; padding-left: 3em; text-indent: -3em;}
/*参考情報 ここまで*/