/*---------------------------------------- キャラクター会話 -----------------------------------------*/ .conversationBig .title, .conversationSmall .title { font-size: 1.1rem; font-weight: bold; text-align: left; } .conversationBig .txt p:last-child, .conversationSmall .txt p:last-child { margin-bottom: 0; } .conversationBig .speakL .txt:before, .conversationSmall .speakL .txt:before { content:''; width:0; height:0 ; border-style:solid; border-color: transparent #000 transparent transparent ; border-width: 6px 10px 6px 0; position: absolute; top: 20px; right: 100%; } .conversationBig .speakR .txt:before, .conversationSmall .speakR .txt:before { content:''; width:0; height:0 ; border-style:solid; border-color: transparent transparent transparent #000 ; border-width: 6px 0 6px 10px; position: absolute; top: 20px; left: 100%;} .conversationBig { position: relative; min-height: 300px; } .conversationBig .txt { width: 55%; border: 2px solid #000; margin: 0 auto 1rem; padding: 20px 30px; border-radius: 10px; position: relative;} .conversationBig .speakL .txt.text_full { width: 75%; margin : 0 0 1em auto; } .conversationBig .speakR .txt.text_full { width: 75%; margin : 0 auto 1em 0; } .conversationBig .chara { content: ''; width: 20%; height: 0; padding-bottom: 30%; background-repeat: no-repeat; background-position: top left; background-size: 100% auto; position: absolute; top:0; } .conversationBig .speakL .chara { left:0;} .conversationBig .speakR .chara { right: 0; } .conversationSmall *[class^='speak'] { position: relative; } .conversationSmall .txt { width: 55%; min-height: 80px; border: 2px solid #000; margin: 0 auto 1rem; padding: 20px 30px; border-radius: 10px; position: relative; } .conversationSmall .chara { content: ''; width: 8%; height: 0; padding-bottom: 12%; background-repeat: no-repeat; background-position: top left; background-size: 100% auto; position: absolute; top:0; } .conversationSmall .speakL, .conversationSmall .speakR { overflow: hidden; } .conversationSmall .speakL .chara { left: 10%; } .conversationSmall .speakR .chara { right:10%; } @media screen and (max-width: 767px) { .conversationBig { min-height: 0; } .conversationBig .txt { width: 100%; padding: 5%; } .conversationBig .speakL .txt:before, .conversationBig .speakR .txt:before { border-color: #000 transparent transparent transparent; border-width: 10px 6px 0 6px; position: absolute; top: 100%; right: 0; left:0; margin: auto;} .conversationBig .speakL, .conversationBig .speakR { position: relative; padding-bottom: 150px; } .conversationBig .chara { width: 100%; height: 120px; padding: 0; top: auto; left:0; right:0; bottom: 1.5rem; margin: auto; background-size: auto 100%; background-position: center center; } .conversationBig .speakL .txt.text_full, .conversationBig .speakR .txt.text_full { width: 100%; margin : 0 0 1em 0; } .conversationSmall .txt { width: 80%; min-height: 0; padding: 5%; } .conversationSmall .speakL .txt { margin: 0 0 1rem auto; } .conversationSmall .speakR .txt { margin: 0 auto 1rem 0; } .conversationSmall .chara { content: ''; width: 15%; padding-bottom: 25%; } .conversationSmall .speakL .chara { left: 0; } .conversationSmall .speakR .chara { right:0; } } .charactor_box { width: auto; height: auto; min-width: 30px; max-width: 100%; max-height: 100%; overflow: hidden;} .charactor_box:before { content: ''; width: 100%; height:0; padding-top: 151%; display: inline-block; } /*城田さん*/ .c_shirota_1 { background-image: url(../img/shirota/1.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_shirota_2 { background-image: url(../img/shirota/2.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_shirota_3 { background-image: url(../img/shirota/3.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_shirota_4 { background-image: url(../img/shirota/4.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_shirota_5 { background-image: url(../img/shirota/5.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_shirota_6 { background-image: url(../img/shirota/6.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } /*女性A*/ .c_womanA_1 { background-image: url(../img/womanA/1.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanA_2 { background-image: url(../img/womanA/2.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanA_3 { background-image: url(../img/womanA/3.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanA_4 { background-image: url(../img/womanA/4.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanA_5 { background-image: url(../img/womanA/5.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanA_6 { background-image: url(../img/womanA/6.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } /*女性B*/ .c_womanB_1 { background-image: url(../img/womanB/1.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanB_2 { background-image: url(../img/womanB/2.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanB_3 { background-image: url(../img/womanB/3.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanB_4 { background-image: url(../img/womanB/4.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanB_5 { background-image: url(../img/womanB/5.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_womanB_6 { background-image: url(../img/womanB/6.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } /*男性A*/ .c_manA_1 { background-image: url(../img/manA/1.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manA_2 { background-image: url(../img/manA/2.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manA_3 { background-image: url(../img/manA/3.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manA_4 { background-image: url(../img/manA/4.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manA_5 { background-image: url(../img/manA/5.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manA_6 { background-image: url(../img/manA/6.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } /*男性B*/ .c_manB_1 { background-image: url(../img/manB/1.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manB_2 { background-image: url(../img/manB/2.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manB_3 { background-image: url(../img/manB/3.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manB_4 { background-image: url(../img/manB/4.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manB_5 { background-image: url(../img/manB/5.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_manB_6 { background-image: url(../img/manB/6.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } /*外国人*/ .c_foreigner_1 { background-image: url(../img/foreigner/1.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_foreigner_2 { background-image: url(../img/foreigner/2.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_foreigner_3 { background-image: url(../img/foreigner/3.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_foreigner_4 { background-image: url(../img/foreigner/4.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_foreigner_5 { background-image: url(../img/foreigner/5.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_foreigner_6 { background-image: url(../img/foreigner/6.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } /*子ども*/ .c_child_1 { background-image: url(../img/child/1.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_child_2 { background-image: url(../img/child/2.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_child_3 { background-image: url(../img/child/3.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_child_4 { background-image: url(../img/child/4.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_child_5 { background-image: url(../img/child/5.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .c_child_6 { background-image: url(../img/child/6.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } /*------------------------------------- 当事務所でお手伝いできること -------------------------------------*/ .comment_help { position: relative; overflow: hidden; font-size: 1.2rem; font-weight: bold; } .comment_help:before { content: ''; width: 8%; height: 0; padding-bottom: 12%; background-repeat: no-repeat; background-position: top left; background-size: 100% auto; position: absolute; top:0; right: 2%; background-image: url(../img/shirota/1.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; display: block; margin: auto; } .comment_help .txt { width: 75%; min-height: 80px; border: 2px solid #000; margin: 0 auto 1rem; padding: 20px 30px; border-radius: 10px; position: relative; } .comment_help .txt:before { content:''; width:0; height:0 ; border-style:solid; border-color: transparent transparent transparent #000 ; border-width: 6px 0 6px 10px; position: absolute; top: 20px; left: 100%;} @media screen and (max-width: 767px) { .comment_help { font-size: 1.1rem; } .comment_help:before { width: 20%; padding-bottom: 30%; position: relative; top:0; right: 0; left: 0; margin: 0 auto 1rem; } .comment_help .txt { width: 100%; } .comment_help .txt:before { border-color: transparent transparent #000 transparent ; border-width: 0 6px 10px 6px; top: auto; left: 0; right: 0; bottom: 100%; margin: auto; } }